会在每个摘要上执行三元运算符吗？答案

【问题标题】：Will the ternary operator be executed on every digest?会在每个摘要上执行三元运算符吗？
【发布时间】：2018-04-26 04:26:56
【问题描述】：

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

例子：

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

或：

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

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

【问题讨论】：

页面加载时和ui.isTrue变化时执行。
仅当 AngularJS 知道 ui.isTrue

标签： javascript html angularjs variables ternary-operator

【解决方案1】：

在 AngularJS 中，包括三元运算符在内的每一个表达式都会被执行：

第一次加载页面时。
每当ui.isTrue 变量在角度应用程序scope 中发生更改时。

如果您查看 angular scope documentation，特别是 Scope as Data-Model 部分，您会看到：

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

$watch 允许向指令通知属性更改，这允许指令将更新后的值呈现给 DOM。

所以当范围内的属性发生变化时，视图总是会得到通知，所以三元表达式会被自动计算。

【讨论】：

【解决方案2】：

这是您正在查看的示例，是的它将在每个摘要上执行

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
	$scope.isTrue = true;
    setInterval(function() {
      $scope.isTrue = !$scope.isTrue;
      $scope.$digest();
  }, 1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div ng-app="myApp" ng-controller='MyController'>
    <div>{{isTrue ? "foo" : "bar"}}</div>
</div>

了解Digest

【讨论】：

【解决方案3】：

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

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 中的某些内容在由三元运算符调用的函数期间发生更改，就会启动另一个摘要，以再次执行三元运算符的函数等。

【讨论】：