angularjs - 在 $watch 中设置变量有时会失败？

Question

使用 Angular 1.0.7:

我有一个用于显示样式复选框的指令。

See plunkr here .

有时 (并不总是)我的观察者不会更新我的范围变量之一，请参阅:

这是一个失败的序列:

foo

酒吧

全部

foo

酒吧

我想知道为什么更新没有发生。

Answer 1

您拥有大量不需要的代码。其中一些代码(不完全确定哪一行)正在干扰。主要是，当您设置ng-model='model' 时，您不需要在复选框上手动设置模型。在您的模板中，这就是您所需要的!

所以这是你的代码的工作分支版本:http://plnkr.co/edit/CzhiAVEAuDtiL2QO95Za正如你所看到的，我几乎删除了你所做的与模型相关的所有事情，因为它都是自动的。

让我们总结一下我们所做的:

删除预编译代码，除非您需要在编译前定义名称？不知道为什么。

不需要输入值函数，是对还是错？这是由模型自动完成的。

$scope.select 应该只切换模型值，其他一切都是自动的。

删除了 init 函数，无论如何都会自动设置模型值

删除了 深从指令内部观察，这里不需要 DEEP 观察，因为您将最低值传递给它，并且它不担心其他值。外部切换功能是唯一担心深度观看的东西。

简化指令代码:

app.directive("uuCheckbox", function() {
return {
  restrict: "A",
  transclude: true,
  scope: {
    model: '=',
    clicked: '&'
  },
  template: "<div ng-click='select()'>" + 
    "<span ng-class='{ checked: model }'></span>" + 
    "<input class='hidden' value='true' type='checkbox' ng-model='model'>" + 
    "<span ng-class='{red: model}' ng-transclude></span>" + 
  "</div>",
  compile: function(elmt, tAttrs) {
    return function($scope, element, attrs) {
      element.find('input').attr('name', attrs.name);
      var on_change = function(new_value) {
        $scope.clicked({ value: new_value });
      };
      $scope.$watch('model', on_change);
      $scope.select = function() {
        $scope.model = !$scope.model;
      };
    };
  }
};
});