确切地何时调用 ng-checked [英] When exactly is ng-checked called

问题描述

在使用 AngularMaterial 时，我有这样的 ng-checked:

While using AngularMaterial, I have ng-checked like this:

<md-list>
    <md-list-item ng-repeat="option in options">
       <p> {{ option }} </p>
       <md-checkbox class="md-secondary" aria-label="{{$index}}" ng-checked="exists($index)" ng-click="toggle($index)"></md-checkbox>
    </md-list-item>
</md-list> 

我的存在函数:

$scope.exists = function (optionNum) {
    console.log('Inside $scope.exists. option: '+optionNum);
};

我的计时器:

function updateTimer() {
    var onTimeout = function(){
      mytimeout = $timeout(onTimeout,1000);
    }
    var mytimeout = $timeout(onTimeout,1000);
}

这样，$scope.exists 函数每秒都会被调用.有人可以解释一下 ng-checked 和 $timeout 的关系吗?以及如何避免这种情况?

With this, the $scope.exists function is getting called every second. Can someone please explain how ng-checked and $timeout related ? and how to avoid this ?

推荐答案

一个字的原因是:摘要循环.由于您的函数绑定到视图，每次摘要循环发生时，这些表达式都会作为脏检查的一部分进行评估，以确保是否需要更新相应的 DOM.这与单独的 angular material 无关，它是 angular 的核心实现.现在，在您的情况下，您无限次调用 $timeout 这意味着在每次超时执行后 digest 循环恰好执行脏检查.

Reason in one word is: digest cycle. Since your function is bound to the view, every time digest cycle happens those expressions gets evaluated as a part of dirty check to make sure if respective DOM needs to be updated or not. This is nothing to do with angular material alone, it is the core angular implementation. Now in your case you are calling $timeout infinitely which means after each timeout execution digest cycle happens to perform dirty check.

现在你所拥有的一切都很好，但是每当你将一个函数bind绑定到 DOM(作为视图绑定、插值或属性状态属性甚至 DOM 过滤器的一部分 - 当然事件很好)你应该意识到，随着应用程序的增长，您不会无意或有意地对该功能执行大量操作，这会减慢整个应用程序的速度，并且在应用程序运行时难以重构和诊断越来越大，问题开始发生.尽可能多地绑定到属性而不是函数.请注意，即使您绑定一个属性仍然有角度的 $parse 会在其上创建一个 getter 并将其添加到 $$watchers 队列中，以便在每个摘要循环中进行脏检查，但区别就是它是一个简单的getter函数.

Now what you have is fine, but whenever you bind a function to DOM (as a part of view binding, interpolation or property state attributes or even DOM filters - of course events are fine) you should be aware of the fact that you do not perform extensive operation in that function accidentally or intentionally as the app grows, it will slow down the entire app, and will be hard to refactor and diagnose when the app grows larger and problems starts happening. As much as possible bind to a property instead of a function. Note that even if you bind a property still angular $parse creates a getter on it and adds it to the $$watchers queue to be dirty checked every digest cycle, but difference is that it is a simple getter function.

所以基本上例如在您的情况下，您可以将 ng-checked 绑定到属性

So basically for instance in your case you could bind ng-checked to property

..ng-checked="doesExist"

并在需要更新时设置属性 doesExist.因此，无需每次都检查是否存在，而是在相应事件发生时显式设置相应属性.这也使逻辑明确.

and set the property doesExist whenever it needs to be updated. So with this instead of checking for the existence every time, you explicitly set the respective property when a respective event happens. That makes the logic explicit as well.

这篇关于确切地何时调用 ng-checked的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！