Question

我可能在$ observe在指令内工作的路上遗漏了一些东西。我必须通过其父指令进行通信的子指令：

<parent>
  <button>Change text</button>
  <child text="child element"></child>
</parent>

app.directive('button', function() {
  return {
    require: '^parent',
    scope: true,
    restrict: 'E',
    link: function(scope, element, attrs, parentCtrl) {
      element.bind('click', function() {
        parentCtrl.changeText();
      });
    },
  };
});

app.directive('parent', function() {
  return {
    restrict: 'E',
    scope: true,
    controller: function($scope, $element, $attrs) {
      var child = $element.find('child');
      this.changeText = function() {
        child.attr('text', 'new text');
      };
    }
  };
});

app.directive('child', function() {
  return {
    restrict: 'E',
    scope: true,
    link: function(scope, element, attrs) {
      attrs.$observe('text', function(text) {
        element.html(text);
      });
    }
  };
});

该代码仅用于说明我正在开发的应用程序中存在的问题。所有指令都需要具有独立的范围，因此我无法与之通信。我做了plunker。如果有更好的方式与父母的指令进行沟通，请随时告诉我。

非常感谢，一如既往！

Answer 1

我不明白为什么父母和孩子必须有孤立的范围，但如果你只想在父母和孩子之间进行交流，你可以使用$emit和$on。

app.directive('parent', function($rootScope) {
  return {
    restrict: 'E',
    scope: true,
    controller: function($scope, $element, $attrs) {
      var child = $element.find('child');
      this.changeText = function() {
        child.attr('text', 'new text');
      };

      $rootScope.$emit('FromParent', somedata);
    }
  };
});

app.directive('child', function($rootScope) {
  return {
    restrict: 'E',
    scope: true,
    link: function(scope, element, attrs) {
      attrs.$observe('text', function(text) {
        element.html(text);
      });

     $rootScope.$on('FromParent', function(event, somedata){
        //Do something with the data
     });
    }
  };
});

通过指令属性传达行动

1 个答案: