AngularJS刷新普通变量
AngularJS刷新普通变量
提问于 2018-08-28 05:47:29
我试图理解AngularJS是如何刷新浏览器中的信息的。出于这个目的，我编写了一个非常简单的接口，它位于一个带有一个控制器和一个服务的AngularJS逻辑中。
界面有两个输入框和三个按钮：
- 输入框与“添加文本”按钮配合使用。无论输入框中的内容是什么，都会连接在一起，并显示在“完整文本”行中。这个结果不会显示在浏览器中，直到手动刷新操作是performed.
- "Add One“按钮，实际上执行了三个操作：
- 每次单击都会将"1”添加到performed.
- “Add变量的当前值中。
- 每次单击都会将"a“连接到当前字符串变量。
- 每次单击都会将"1”添加到数组变量的当前值中。在浏览器中动态显示对阵列Variabler的操作，但直到手动刷新操作完成后，才会显示其他操作。实际执行手动刷新operation.
时，
- 按钮会执行刷新字段
我想知道为什么数组中的变量是动态变化的，而其他变量类型需要手动操作才能用服务中变量的当前值加载变量。
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。
回答 1
Stack Overflow用户
回答已采纳
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52047400
复制相关文章
相似问题