我试图理解AngularJS是如何刷新浏览器中的信息的。出于这个目的,我编写了一个非常简单的接口,它位于一个带有一个控制器和一个服务的AngularJS逻辑中。
界面有两个输入框和三个按钮:
时,
我想知道为什么数组中的变量是动态变化的,而其他变量类型需要手动操作才能用服务中变量的当前值加载变量。
html代码是:
<div ng-controller='Refresh as r1'>
<h3>Variable Refreshing Test</h3>
<input type="text" ng-model='r1.texto' placeholder="Write a Text">
<input type="text" ng-model='r1.addtext' placeholder="Write a text to concatenate">
<button ng-click='r1.addText();'>Add Text</button>
<button ng-click='r1.refreshText();'>Refresh Fields</button>
<button ng-click='r1.addOne();'>Add One</button>
<div>
<b>Initial text is:</b> {{r1.texto}}
<br>
<b>Current text to add is:</b> {{r1.addtext}}
<br>
<b>Complete text is:</b> {{r1.totaltext}}
<br>
<b>Integer currently is:</b> {{r1.Integer}}
<br>
<b>String currently is:</b> {{r1.String}}
<br>
<b>Array currently is:</b> {{r1.Array}}
</div>
js代码是:
(function() {
'use strict';
angular.module('RefreshText', [])
.controller('Refresh', Refresh)
.service('Service1', Service1);
function Refresh($scope, Service1) {
var refresh = this;
window.MY_SCOPE = refresh;
window.listScope = $scope;
refresh.addText = function() {
var temp = Service1.addText(refresh.texto, refresh.addtext);
};
refresh.refresh.Text = function() {
refresh.totaltext = Service1.getText();
refresh.Integer = Service1.getInteger();
refresh.String = Service1.getString();
refresh.Array = Service1.getArray();
};
refresh.Integer = Service1.getInteger();
refresh.String = Service1.getString();
refresh.Array = Service1.getArray();
refresh.addOne = function() {
Service1.sumaOne();
};
}
function Service1() {
var service = this;
window.ServiceScope = service;
var text3;
var varInteger = 1;
var varString = "a";
var varArray = [];
varArray[0] = 1;
service.addText = function(text1, text2) {
text3 = text1 + text2;
return text3;
};
service.getText = function() {
return text3;
};
service.getInteger = function() {
return varInteger;
};
service.getString = function() {
return varString;
};
service.getArray = function() {
return varArray;
};
service.sumaOne = function() {
varInteger++;
varString = varString + "a";
varArray[0]++;
};
}
})();
我用于测试的代码位于以下位置:https://github.com/harryangstrom/refreshTest.git。
发布于 2018-08-28 06:19:21
您已经获得的非数组变量使用原语绑定,而AngularJS不会自动更新这些绑定。如果您将这些变量放在对象后面并通过对象绑定到它们,那么对这些变量的任何更改都应该会看到它们在视图中自动更新。
例如,您可以这样设置您的JavaScript:
function Refresh($scope, Service1) {
this.vars = Service1.getVars();
this.updateVars = Service1.updateVars;
// ...
}
function Service1() {
// Note primitives are inside an object
var vars = { int: 0, str: 'a' };
this.getVars = function () {
return vars;
};
this.updateVars = function () {
vars.int += 1;
vars.str += 'a';
};
// ...
}
然后您的HTML如下所示:
<div ng-controller="Refresh as r1">
<div>{{ r1.vars.int }} {{ r1.vars.str}}</div>
<button ng-click="r1.updateVars()">Update</button>
</div>
https://stackoverflow.com/questions/52047400
复制相似问题