使用AngularJS，你会得到更新，什么不会呢？ [英] Using AngularJS, what will get updated and what will not?
问题描述
我使用AngularJS 1.5.0，并注意 {{美孚（）}} 将根据双向绑定，但
所以，如果我有一个输入文本框，并受双向绑定，并更改其中的数字编号， {{美孚（）}} 这使用该数字将得到更新，而 {{}吧} 它使用数量，但在控制器，不会得到更新。
在举例： https://jsfiddle.net/507caoxf/
什么是规则？ （请参考）
在code是：
＆LT;机身NG-应用程序=的myappNG控制器=ctrlFoo＆GT;
＆LT;输入类型=文本NG模型=富[2] .abc.haha [3]＆GT; {{theMagicNumber（）}} {{栏}}
＆LT; /身体GT;
和JS的：
angular.module（MyApp的，[]）
.controller（ctrlFoo功能（$范围，$区间，$日志）{ 的console.log（进入全能控制器）; $ scope.foo = [1，3，{ABC：{哈哈：[5,6,7,8,9]}}]; $ scope.theMagicNumber =功能（）{
$ log.log（雄伟的函数被调用时，新的日期）;
$ log.log（JSON.stringify（$ scope.foo））;
变种N = +（$ scope.foo [2] .abc.haha [3]）;
返回n * n的;
} $ scope.bar + =（$ scope.foo [2] .abc.haha [3]）* 2;}）;
当你有 NG-控制器=ctrlFoo在视图中，角实例化 ctrlFoo 控制器。这样code被执行：
的console.log（进入全能控制器）;$ scope.foo = [1，3，{ABC：{哈哈：[5,6,7,8,9]}}];$ scope.theMagicNumber =功能（）{
$ log.log（雄伟的函数被调用时，新的日期）;
$ log.log（JSON.stringify（$ scope.foo））;
变种N = +（$ scope.foo [2] .abc.haha [3]）;
返回n * n的;
}$ scope.bar + =（$ scope.foo [2] .abc.haha [3]）* 2;
这是什么code呢？
- 它记录了一个字符串到控制台
- 它初始化数组并将其分配给
$ scope.foo - 它创建了一个功能，并将其分配给
$ scope.theMagicNumber - 它计算一些数值和值分配给
$ scope.bar
现在，在视图中，您有以下前pressions：
{{theMagicNumber（）}}{{栏}}
他们都做同样的事情：看小胡子的前pression的值，每次改变，刷新他们的新价值DOM
。评估栏包括在获得 $ scope.bar 的价值。请问 $ scope.bar 的值都没有改变？没有，因为它的计算一次，当控制器被实例化。所以，每次的摘要是由角完成，值 $ scope.bar 由角评价，但正弦该值永远不会改变，在DOM从未刷新。
评估 theMagicNumber（）在于调用该函数 $ scope.theMagicNumber（）和使用返回值评价的结果。因此，每一个摘要是由角完成时间，函数被调用，并返回一个新的值。因此，DOM将被刷新。
这基本上等同于执行以下操作每一次模型的变化：
的console.log（$ scope.bar）;
的console.log（$ scope.theMagicNumber（））;
第一个控制台日志将始终显示相同的值：当它计算栏的值，在实例化时。而第二个总是会调用该函数，得到一个新的结果，并打印出来。
I am using AngularJS 1.5.0, and notice that {{ foo() }} will get updated according to two-way binding, but {{ bar }} will not.
So if I have an input text box, and is subject to two-way binding, and I change the number in it, {{ foo() }} which uses that number will get updated, while {{ bar }} which uses that number but in the controller, will not get updated.
Example at: https://jsfiddle.net/507caoxf/
What is the rule? (please give a reference)
The code is:
<body ng-app="myapp" ng-controller="ctrlFoo">
<input type="text" ng-model="foo[2].abc.haha[3]">
{{ theMagicNumber() }}
{{ bar }}
</body>
and the JS:
angular.module("myapp", [])
.controller("ctrlFoo", function($scope, $interval, $log) {
console.log("coming into the almighty controller");
$scope.foo = [1, 3, { abc: { haha: [5,6,7,8,9]}}];
$scope.theMagicNumber = function() {
$log.log("the majestic function is invoked at ", new Date);
$log.log(JSON.stringify($scope.foo));
var n = +($scope.foo[2].abc.haha[3]);
return n * n;
}
$scope.bar = +($scope.foo[2].abc.haha[3]) * 2;
});
When you have ng-controller="ctrlFoo" in the view, angular instantiates the ctrlFoo controller. So that code is executed:
console.log("coming into the almighty controller");
$scope.foo = [1, 3, { abc: { haha: [5,6,7,8,9]}}];
$scope.theMagicNumber = function() {
$log.log("the majestic function is invoked at ", new Date);
$log.log(JSON.stringify($scope.foo));
var n = +($scope.foo[2].abc.haha[3]);
return n * n;
}
$scope.bar = +($scope.foo[2].abc.haha[3]) * 2;
What does this code do?
- It logs a string to the console
- It initializes an array and assigns it to
$scope.foo - It creates a function and assigns it to
$scope.theMagicNumber - It computes some value and assigns that value to
$scope.bar
Now, in the view, you have the following expressions:
{{ theMagicNumber() }}
{{ bar }}
They both do the same thing: watch the value of the expression between the mustaches, and every time they change, refresh the DOM with their new value.
Evaluating bar consists in getting the value of $scope.bar. Does the value of $scope.bar ever changes? No, because it's computed once, when the controller is instantiated. So, every time the digest is done by angular, the value of $scope.bar is evaluated by angular, but sine this value never changes, the DOM is never refreshed.
Evaluating theMagicNumber() consists in calling the function $scope.theMagicNumber() and use the returned value as the result of the evaluation. So, every time the digest is done by angular, the function is called, and returns a new value. So the DOM is refreshed.
This is basically equivalent to doing the following every time the model changes:
console.log($scope.bar);
console.log($scope.theMagicNumber());
The first console log will always display the same value: the value of bar when it was computed, at instantiation time. Whereas the second one will always call the function, get a new result and print it.
这篇关于使用AngularJS，你会得到更新，什么不会呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
