html 标记处的表达式与使用控制器的表达式

Expression at html tag vs using controller

本文关键字：表达式 控制器 html      更新时间：2023-09-26

如果我有：

$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 元素，"渲染"取决于复杂的条件，除了"可读性"之外，以下代码是否有任何性能（渲染速度）差异？ 我问这个问题，因为第一个显示所有内容的时间比第二个要长......但是我不确定这是否属实...

    <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...

解释

ngIf 指令使用原型继承创建一个新作用域，这意味着如果在 ngIf 作用域上找不到该属性，它将查找该属性的原型对象链，该属性$scope由您控制。

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

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

和 

ng-if="show()"

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

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

结论

对于您的情况，在控制器中定义方法并在 ngIf 指令中使用它，但请考虑完全避免使用 ngIf 的可能性，因为它会增加 $$watcher 计数，只需执行 DOM 操作（有关更多信息，请参阅 angulart.element ）而不增加 $$watcher 计数。

是否有任何文档解释了 HTML 标记中函数的计算

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

从文档中：

  * @ngdoc method
  * @name $rootScope.Scope#$watch
  * @kind function
  *
  * @description

注册要在watchExpression更改时执行的listener回调。

  • 每次调用 ng.$rootScope.Scope#$digest 时都会调用该watchExpression，并应返回将监视的值。（ watchExpression不应更改 使用同一输入多次执行时的值，因为它可能被多次执行 时间由ng.$rootScope.Scope#$digest。也就是说，watchExpression应该是幂等的。
--

AngularJS $rootScope.Scope API 参考 -- $watch

$digest（）;

处理当前范围的所有观察程序及其子级。由于观察者的侦听器可以更改模型，因此$digest()会不断调用观察者，直到不再触发侦听器。这意味着有可能进入无限循环。如果迭代次数超过 10，此函数将抛出"超出最大迭代限制"。

--

AngularJS $rootScope.Scope API 参考 -- $digest

相关文章：