Question

http://plnkr.co/edit/VAE43y5cagCF8jq5AlaY?p=preview

在指令中，我正在使用范围。$ 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();
                    }
                });
            });

Answer 1

我会使用控制器$viewValue而不是attrs[ngModel]。更新控制器scopes时效率更高。因此，您可以只设置新值，而不是使用解析和其他内容进行解析和分配。

首先我们需要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();
   }
});

我分叉了你的plunkr

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

1 个答案: