Question

我有以下脚本

// Code goes here

angular.module('default', [])
  .directive('webAbc', function($log) {
    return {
      restrict: 'A',
      controller: function($scope, $element, $attrs, $transclude) {
        this.checkboxes             = [];
        this.updateLinkedCheckboxes = function(value) {
          angular.forEach(this.checkboxes, function(checkbox, index) {
            checkbox.setChecked(value);
          });
        };
      }
    };
  })
  .directive('webDef', function($log) {
    return {
      restrict: 'C',
      require: '^webAbc',
      link: function (scope, iElement, iAttrs, webAbc, transcludeFn) {
        iElement.bind('change', function () {
          webAbc.updateLinkedCheckboxes(iElement.prop('checked'));
          scope.$apply();
        });
      }
    };
  })
  .directive('webGhi', function($log) {
    return {
      restict: 'A',
      require: '^webAbc',
      link: function (scope, iElement, iAttrs, webAbc, transcludeFn) {
        scope.setChecked = function(value) {
          $log.log('This element ' + iAttrs.name + ' cheked: ' + (!value ? 'checked' : ''));
          $log.log(value);
          if (value)
          {
            iElement.attr('checked', 'checked');
          }
          else
          {
            iElement.remoteAttr('checked');
          }
        };

        webAbc.checkboxes.push(scope);
      }
    };
  });

它应该选中或取消选中标记列中表格中的所有复选框，但我无法使用以下解决方案。

首先看来，由于在控制台中打印出来，只有最后webGhi可见。而且，似乎我出于某种原因无法取消选中复选框。

链接到示例：http://jsbin.com/difihabe/1/

谢谢。

Answer 1

在webGhi指令中使用隔离范围，或者它的所有四个实例将推送相同范围（父级）：

.directive('webGhi', function($log) {
  return {
    restict: 'A',
    require: '^webAbc',
    scope: {},
    link: ...

也可以使用：

而不是添加/删除checked属性

jQuery的prop()功能：iElement.prop('checked', value);
直接设置DOM元素的已检查属性： iElement[0].checked = value;

演示： http://jsbin.com/tudotugi/2/

如何在AngularJS中多次使用同一指令

1 个答案: