Question

如果你有一个指令，你在一个页面上多次使用1指令如何与另一个指令通信？

我正试图在父子关系中将指令链接在一起。当单击指令A时，我想过滤指令B，使其只有指令A中所选项目的子项。在这种情况下，页面上可能存在无限数量的指令和关系。

通常情况下，我会在其每个子节点上使用指令A调用过滤方法，并且每个子节点调用它的子节点以继续过滤层次结构。

但我无法弄清楚是否可以调用从1指令到另一个指令的方法。

谢谢

Answer 1

听起来你正在寻找指令控制器。您可以使用指令的require:参数来引入另一个指令的控制器。它看起来像这样：

app.directive('foo', function() {
  return {
    restrict: 'A',
    controller: function() {
        this.qux = function() {
          console.log("I'm from foo!");
        };
    },
    link: function(scope, element, attrs) {

    }
  };
});

app.directive('bar', function() {
    return {
        restrict: 'A',
        require: '^foo',
        link: function(scope, element, attrs, foo) {
            foo.qux();
        }
    };
});

从角度文档中，以下是您可以使用的符号以及它们的用途。

(no prefix) - Locate the required controller on the current element.
? - Attempt to locate the required controller, or return null if not found.
^ - Locate the required controller by searching the element's parents.
?^ - Attempt to locate the required controller by searching the element's parents, or return null if not found.

这是我的例子的jsbin。 http://jsbin.com/aLikEF/1/edit

另一个可能适用于您需要的选项是拥有一个服务，每个指令设置一个监视并可以操作。例如，directive1可以监视服务中的属性并响应更改，还可以设置可以更改该属性的按钮。然后，directive2也可以观察和更改服务，但是无论你如何设置它们，它们都会相互响应。如果您还需要jsbin，请告诉我。

我希望这有帮助！

Answer 2

您可以尝试将所有数据放入指令可以引用的服务中。

类似的东西：

app.factory('selectedStuffService', function(){
    var allItems = [];
    var selectedItems = [];

    function addSelectedItem(item){
         selectedItems.push(item);
    }

    return {
        allItems: allItems,
        selectedItems: selectedItems,
        addSelectedItem: addSelectedItem
    }
}

指令A中的交互更改selectedItems数组中的值，指令B可以绑定它。您可以轻松地向服务添加其他方法以根据需要过滤/操作项目，并且任何使用该服务的指令都应该能够根据其他指令所做的更改进行更新。

指令调用的角度指令

2 个答案: