angularjs - 通过取消选中带有指令的复选框来更新模型

Question

所以我想要做的是对复选框的依赖。因此，一旦取消选中它所依赖的复选框，该依赖复选框将被禁用 + 取消选中。出于某种原因，从指令中取消选中复选框可以完成这项工作，例如禁用和取消选中它，但绑定到它的模型不会更新。

HTML：

<div>
  <input type="checkbox" data-ng-model="test.dependency"/>
  <span>unchecking this one will disable the next</span>
</div>

<div>
  <input dependent="test.dependency" type="checkbox" data-ng-model="test.optional" />
  <span>this checkboxs directive will uncheck it when the first one is unchecked, but the model doesn't get updated, not it's {{test.optional}}</span>
</div>

控制器（用于默认选项）：

$scope.test = {
  dependency: true,
  optional: false
}

指示：

restrict: 'A',
link: function(scope,elem,attrs){
  scope.$watch(attrs.dependent,function(val){
    if (!val){
      elem[0].checked = false;
      elem[0].disabled = true
    } else {
      elem[0].disabled = false
    }
  })
}

编辑：对，这是笨拙的。

Answer 1

由于您将指令应用于已经使用该ng-model指令的元素，因此您需要告诉ng-model更新模型和视图：

app.directive('dependent', function(){
  return {
    restrict: 'A',
    require: 'ngModel', // Requires the NgModelController to be injected
    link: function(scope,elem,attrs, ngModelCtrl){
      scope.$watch(attrs.dependent, function(val){
        if (!val) {
          elem[0].disabled = true;
          ngModelCtrl.$setViewValue(); // Updates the model
          ngModelCtrl.$render();       // Updates the view 
        } else {
          elem[0].disabled = false
        }
      });
    }
  }
});

Plunker在这里。

查看NgModelController 文档了解更多详细信息。