Question

我正在使用AngularJS 1.5.0，并注意{{ foo() }}将根据双向绑定进行更新，但{{ bar }}不会。

因此，如果我有一个输入文本框，并且需要双向绑定，并且我更改了其中的数字，那么使用该数字的{{ foo() }}将会更新，而{{ bar }}则使用<body ng-app="myapp" ng-controller="ctrlFoo"> <input type="text" ng-model="foo[2].abc.haha[3]"> {{ theMagicNumber() }} {{ bar }} </body>该数字但在控制器中不会更新。

示例：https://jsfiddle.net/507caoxf/

规则是什么？（请参考）

代码是：

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;

});

和JS：

select name,val froom table where date=&date

Answer 1

如果视图中有ng-controller="ctrlFoo"，则角度实例化ctrlFoo控制器。所以代码执行：

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;

这段代码有什么作用？

它将字符串记录到控制台
初始化数组并将其分配给$scope.foo
创建一个函数并将其分配给$scope.theMagicNumber
计算某个值并将该值分配给$scope.bar

现在，在视图中，您有以下表达式：

{{ theMagicNumber() }}

{{ bar }}

他们都做同样的事情：观察胡须之间的表达式的价值，每当他们改变时，用他们的新值刷新DOM。

评估bar包括获取$scope.bar的值。 $scope.bar的值是否会发生变化？不，因为当控制器被实例化时，它被计算一次。因此，每次通过angular完成摘要时，$scope.bar的值都是通过angular来计算的，但正弦值此值永远不会改变，DOM永远不会刷新。

评估theMagicNumber()包括调用函数$scope.theMagicNumber()并使用返回的值作为评估结果。因此，每次通过angular完成摘要时，都会调用该函数，并返回一个新值。所以DOM会刷新。

这基本上等同于每次模型更改时执行以下操作：

console.log($scope.bar);
console.log($scope.theMagicNumber());

第一个控制台日志将始终显示相同的值：计算时的bar值，在实例化时。而第二个将始终调用该函数，获得一个新结果并打印它。

使用AngularJS，什么会更新，什么不会？

1 个答案: