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

如果我有：

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

你好 //更多像这样的div标签。。。 及

$scope.show=function（）{
变量栏=getB（）=“文本”？getC（）：getD（）；
返回getA（）和&bar|getE（）；
}
//更多像这样的功能。。。
你好
//更多像这样的div标签。。。

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

ng if

指令使用

$watch

对表达式求值

从文档中：

注册一个

侦听器

回调，以便在

watchExpression

更改时执行

• 每次调用时都会调用

  watchExpression

  ，并应返回将被监视的值。（

  watchExpression

  不应更改 使用同一输入多次执行时，它的值，因为它可能被多次执行 乘以。也就是说，

  watchExpression

  应该是

--

$digest（）； 处理当前作用域及其子项的所有观察者。由于观察者的侦听器可以更改模型，

$digest（）

不断调用观察程序，直到没有更多侦听器触发。这意味着有可能进入无限循环。如果迭代次数超过10，此函数将抛出“超出最大迭代限制”

---

--解释

使用原型继承创建一个新的作用域，这意味着如果在ngIf作用域中找不到该属性，它将查找该属性的prototype objects链，这是由您控制的$scope

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

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

及

在第一个示例中，执行ngIf时将访问父作用域4次（

getA、getB、getC或getD、getE

函数）

在第二个示例中，只有一次（

show

function），这就是性能差异的原因

结论

---

在控制器中定义方法，并在NGIF指令中使用它，但考虑避免使用<强> NGIF <强>的可能性，因为它将增加$$WAKER计数，只执行DOM操作（参见）而不增加$$watcher计数。

我可以想象在每个html元素上呈现ng if属性中的所有额外字符将是DOM唯一的负担，而DOM很可能会这样做（取决于渲染的数量）这可能就是为什么它会慢一些。我很难相信差别会很明显，不过……无论如何，那是我的0美元。02@Claies是否有任何文档说明html标记中函数的求值将触发摘要？这似乎不正确@Claies每个函数都会导致另一个摘要。如果虽然返回了不同的结果，但最好在控制器中运行一次，并传递单个变量，尽管如此，如所提到的那样，知道实际使用的情况会很有帮助。代码看起来有点奇怪，逻辑上可能有优化的潜力。另一方面，您可以考虑一次性绑定。为了获得更好的性能，如果值不变。@Kossel不知道，我的答案是“完全为您使用”（可以添加更多解释）？如果您使用JQuery，只需使用它切换DOM，而不使用angular:-DDon，不要复制OP的错误。“文本”应该用单引号括起来。@georgeawg，谢谢！我已经根据您的建议更新了答案）

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

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

ng-if="show()"