Angularjs 为什么此指令的视觉效果与值不一致

在指令中，我使用的是scope.$apply（）。但是，如果单击过快，则会更改值，但不会更改视觉效果。这个问题似乎与时间有关。如果我加载页面并让它放置2秒钟，第一次单击会更改值。但是，如果我尝试过快地单击它，它将在不更改视觉效果的情况下更改值

有人能解释一下吗？我想这可能是消化周期中期或类似的，但不能肯定，我不知道该怎么办

            //toggle the state when clicked
            el.bind('click', function () {
                scope.$apply(function () {
                  var getter=$parse(attrs.ngModel);
                  var setter=getter.assign;
                  setter(scope,!getter(scope));
                    //scope[attrs.ngModel] = !scope[attrs.ngModel];
                    if (el.hasClass('on')) {
                        off();
                    } else {
                        on();
                    }
                });
            });

---

我将使用控制器

$viewValue

，而不是使用

attrs[ngModel]

。更新控制器

作用域时效率更高。因此，您可以只设置新值，而不是使用parse和其他东西进行解析和赋值

首先我们需要
ngModel
控制器

require: '^ngModel',

然后我们只需设置范围的新值

el.bind('click', function () {
    scope.$apply(function () {
         ctrl.$setViewValue(!ctrl.$viewValue);
    });
});

然后我们观察模型属性

scope.$watch(attrs.ngModel, function (oldValue, newValue) {
   if (newValue) {
      off();
   } else {
      on();
   }
});

我分叉了你的
Hmm.。即使我让页面停留几秒钟，第一次单击只会更改文本，而不会更改视觉效果。第一次单击图像应处于非活动状态，而不是活动状态。在你回答之前，我已对此进行了更改。因此，我继续尝试合并我们的两个更改，它可以工作，但不是第一次单击。有什么建议吗？我找到了$先看“新价值观”的更新。以下是plunkr BTW仅更改单击时的值，不触发on（）或off（），$watch将触发它