3

だから私が作ろうとしているのは、チェックボックスとの依存関係です。そのため、依存しているチェックボックスがオフになると、依存するチェックボックスが無効になり、チェックが解除されます。何らかの理由で、ディレクティブ内からチェックボックスをオフにすると、無効にしてチェックを外すのと同じように機能しますが、それにバインドされているモデルは更新されません。

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

編集：そうです、ここにプランクがあります。

4

1 に答える 1

6

ディレクティブを既に使用している要素にディレクティブを適用しているため、モデルとビューを更新する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
        }
      });
    }
  }
});

ここでプランカー。

詳細については、NgModelController のドキュメントをご覧ください。

于 2013-08-23T22:57:55.567 に答える