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

Question

所以我想要做的是对复选框的依赖。因此，一旦取消选中依赖的复选框，该依赖的复选框将被禁用+取消选中。由于某种原因，从指令内部取消选中复选框可以完成这项工作，就像禁用并取消选中它一样，但绑定(bind)到它的模型不会更新。

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>

Controller (默认选项):

$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
    }
  })
}

编辑:正确，here's砰的一声。

Answer 1

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

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
        }
      });
    }
  }
});

笨蛋here .

查看 NgModelController documentation了解更多详情。