三元运算符是否会在每个摘要上执行？

Question

如果我在Angular.js视图中使用三元运算符,它将在每个摘要(如函数)上执行,还是仅在决策所需的变量发生变化时执行？

例:

<div>{{ui.isTrue ? "foo" : "bar"}}</div>

要么:

<div ng-bind="ui.isTrue ? 'foo' : 'bar'"></div>

它会在每个摘要上执行还是仅在ui.IsTrue更改时执行？

Answer 1

在AngularJS中,将执行包括三元运算符在内的每个表达式:

• 首先加载页面.
• 每当ui.isTrue角度app中的变量发生变化时scope.

如果您查看角度范围文档,特别是Scope作为数据模型部分,您将看到:

范围是应用程序控制器和视图之间的粘合剂.在模板链接阶段,指令$watch在范围上设置表达式.

将$watch允许被通知的属性发生变化,这使得该指令使更新后的值到DOM的指示.

因此,当范围中的属性发生更改时,将始终通知视图,因此将自动评估三元表达式.

Answer 2

我自己做了一个小提琴来测试这个。

http://jsfiddle.net/xuvzzay8/4/

HTML：

<div ng-controller="MyCtrl">    
    {{bool ? ternaryTrue() : ternaryFalse() }}<br/>

    {{bool}}<br/>        
    <button ng-click="bool = !bool">Toggle Bool</button>
    {{a}}
    <div style="background-color:red" ng-mouseover="hover()">
        Hover here to trigger digest
    </div>
</div>

JS：

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {    
    $scope.bool = true; 
    $scope.a = 0;
    $scope.ternaryTrue = function(){
        console.log("ternary executed on true");   
    }
    $scope.ternaryFalse = function(){
        $scope.a++; //creates an infinite digest loop
        console.log("ternary executed on false");   
    }    
    $scope.hover = function(){
        console.log("Hover");
    }
}

结果是三元运算符在每个摘要上执行。

编辑：用这个可以轻松创建无限摘要循环。一旦 $scope 中的某些内容在三元运算符调用的函数期间发生更改，就会启动另一个摘要，再次执行三元运算符的函数等。