绑定到同一函数的角度元素.避免对每个摘要进行多次调用
Angular elements bound to same function. Avoid multiple call on each digest
给定以下条件:
<div data-ng-repeat="val in vals">
<div data-ng-class:{'myClass':isEngineOn(val)}>
<span data-ng-show="isEngineOn(val)">yeah it's on</span>
<span data-ng-show="!isEngineOn(val)"> standby</span>
<button data-ng-disabled="isEngineOn(val)">Start engine</button>
<div>
</div>
isEngineOn随我从服务器收到的websocket消息而更改。
有没有办法避免在每次摘要中,针对重复中的每个值,对isEngineOn求值4次?比如初始化一个变量之类的?
您可以使用简单的CSS实现这一点,而无需调用span中的函数。我认为这比JavaScript解决方案要高效得多,尤其是当你对许多元素进行重复时,因为你可以保存绑定:
<div data-ng-repeat="val in vals">
<div data-ng-class:{'myClass':isEngineOn(val)}>
<span class="showWhenOn">yeah it's on</span>
<span class="showWhenOff"> standby</span>
<button onclick="alert('Starting...')">Start engine</button>
</div>
</div>
CSS:
.showWhenOn {
display: none;
}
.myClass .showWhenOn {
display: inline;
}
.myClass .showWhenOff {
display: none;
}
.myClass button {
pointer-events: none;
color: silver;
}
JS Fiddle
是的,只需在控制器中有一个保存结果的变量,并在收到来自服务器的更新时更新该变量:
在您的控制器中:
$scope.engineOn = isEngineOn();//also make sure to update from server whenever you need
请注意,如果不再从视图中调用isEngineOn()
函数,则它不需要在作用域中,可以将其声明为常规变量。
HTML:
<div data-ng-class="{'myClass':engineOn}">
<span data-ng-show="engineOn">yeah it's on</span>
<span data-ng-show="!engineOn"> standby</span>
<div>
EDIT 2:正如您所说,ng-init
没有更新摘要,所以我采取了第二种方法。
我花了很长的时间,为您的值创建了一个相应的数组,您可以从中阅读:
<div data-ng-repeat="val in vals" >
<div data-ng-class="{'myClass':enginOn[val]}">
<span data-ng-show="engineOn[val]">yeah it's on</span>
<span data-ng-show="!engineOn[val]"> standby</span>
<button data-ng-disabled="isEngineOn(val)">Start engine</button>
</div>
</div>
Fiddle。
您可以将观察者设置为当您从服务器接收到答案时会发生变化的变量,例如:
scope.$watch(function(){ return <var that changes>; }, function(oldv, newv){
if(oldv !== newv)
scope.isEngineOn = <Calculate here>;
});
然后使用:
<span data-ng-show="isEngineOn">
相关文章:
- 如何从模块链中调用函数.导出到节点中
- 调用函数内部的函数
- 在javascript中调用c函数
- DropDownListFor赢得't在更改时调用函数
- Javascript页面调用函数
- 在动画结束之前调用函数
- 允许父窗口在其不同域的子iframe上调用函数
- 运行Infinite Scroll后调用函数时出现问题
- JavaScript:在调用函数的文本输入上按enter键
- 使用大括号和不使用bracs调用函数的区别
- javascript在事件上调用函数
- 从index.html调用函数,该函数无限循环
- 从带参数的字符串变量调用函数中的函数
- 为什么 JS 不在滚动时调用函数
- 是否可以在不更改上下文的情况下调用函数.apply
- 如何在ES6类中使用参数调用函数
- AngularJS:调用函数时编号不更新
- JavaScript中的立即调用函数表达式(IIFE)-传递jQuery
- 在JavaScript中调用函数时自定义此选项
- 调用函数中声明的变量