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

Posted 2023-02-23

【中文标题】会在每个摘要上执行三元运算符吗？

【英文标题】：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

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