Question

如果我有角色的话：

$scope.getA= function(){
// do los stuff
return result;
};
$scope.getB= function(){
// do los stuff
return result;
};
$scope.getC= function(){
// do los stuff
return result;
};
//$scope.getD(), $scope.getE()...

我有一些html元素＆＃34;渲染＆＃34;取决于复杂的条件，除了＆＃34;可读性＆＃34;，在下面的代码中是否有任何性能（渲染速度）差异？我问这个问题，因为第一个显示的时间比第二个要长......但是我不确定这是不是真的......

    <div ng-if="getA()&&(getB()=="text"?getC():getD())||getE()">hello</div>
//more div tags like this...

和

    $scope.show = function(){
       var bar = getB()=="text"?getC():getD();
       return getA()&&bar||getE();
    }
    //more functions like this...
    <div ng-if="show()">hello</div>
//more div tags like this...

Answer 1

是否有任何文档解释了html标签中的功能评估

ng-if指令使用$watch来计算表达式。 ¹

来自文档：

  * @ngdoc method
  * @name $rootScope.Scope#$watch
  * @kind function
  *
  * @description
只要listener更改，就会注册watchExpression回调。


每次调用ng.$rootScope.Scope#$digest时都会调用watchExpression，并应返回将要观看的值。（watchExpression不应该改变   使用相同的输入多次执行时的值，因为它可以执行多次   时间ng.$rootScope.Scope#$digest。也就是说，watchExpression应为idempotent。

- AngularJS $rootScope.Scope API Reference -- $watch

$消化（）;

处理当前范围及其子项的所有观察者。因为观察者的听众可以改变模型，$digest()会一直呼叫观察者，直到不再有听众为止。这意味着可以进入无限循环。此函数将抛出“超出最大迭代限制”。如果迭代次数超过10次。

- AngularJS $rootScope.Scope API Reference -- $digest

Answer 2

<强>解释

ngIf directive使用原型继承创建一个新范围，这意味着如果在 ngIf 范围内找不到该属性，它将查看它的原型对象链对于该属性，由您控制的范围是

知道让我们回到您的代码示例：

ng-if="getA() && (getB() == 'text' ? getC() : getD()) || getE()"

和

ng-if="show()"

执行 ngIf 时的第一个示例将访问父范围 4 次（getA, getB, getC or getD, getE个函数），

在第二个样本中只有一次（show函数），这会导致性能差异。

<强>结论

对于你的案例在控制器中定义方法并在ngIf指令中使用它，但考虑可能完全避免使用 ngIf ，因为它会增加$$观察者数量，只需执行DOM操作（参见{{ 3}}）没有增加$$观察者数量。

html标签与使用控制器的表达

2 个答案:

$消化（）;