Question

我有这样的指示：

.directive('checkMeIfApplyAll', function($timeout) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(attrs.checkMeIfApplyAll, function(value) {
                debugger;
                if(value === true) {
                    element.prop('checked', true);
                }
                else {
                    element.prop('checked', false);
                }
            });
        }
    };

这是相应的html代码段：

<tr 'ng-repeat'='permission in category.permissions'>
  <input type='checkbox' 'ng-model'='permission.show' 'check-me-if-apply-all'= 'category.allChecked'>
</tr>

请注意，如果category.allChecked的值发生更改，则会触发观察器功能。如您所见，如果该值为true，则使用jquery，我可以选中该复选框。但是，正如您在html代码段中所看到的，每个复选框都已分配了一个模型，例如'permission.show'。而我真正想要做的是更改指令中的 model 值，而不仅仅是元素的属性。如何访问监视功能内部元素的ng-model属性？

Answer 1

让我们变得简单。我认为你不需要这个指令，不应该过度使用$ watch。

<tr ng-repeat='permission in category.permissions'>
  <input type='checkbox' ng-model='permission.show' 
    ng-checked='category.allChecked'>
</tr>

要访问指令中的模型，只需访问scope.category.permissions[INDEX].show

由于没有提供plnkr，我还没有测试过上述内容。

Answer 2

您可以使用ngModelController：

.directive('checkMeIfApplyAll', function($timeout) {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            scope.$watch(attrs.checkMeIfApplyAll, function(value) {
                debugger;
                if(value === true) {
                    element.prop('checked', true);
                }
                else {
                    element.prop('checked', false);
                }

                // Set value like this
                ngModel.$setViewValue(value);
            });
        }
    };

AngularJS：在$ watch函数中更改模型

2 个答案: