AngularJS父指令如何与子指令通信

Question

考虑两个带有隔离作用域的嵌套指令：

<dctv1>
    <dctv2></dctv2>
<dctv1>

如果我想让 dctv2 和 dctv1 通信，我有几个选项：

1. 在 dctv2 的定义中使用 require:'^dctv1' 来要求获取 dctv1 的控制器。
2. 在父作用域上使用包装器 <dctv2 callParent="hello()"></dctv2> 并使用 scope:{callParent:'&'} 调用父域上的表达式。
3. 也可以在 dctv2 中使用 $scope.$emit，但此时所有父作用域都会收到消息。

现在我想让 dctv1 和 dctv2 通信。

1. 我唯一能做的是使用 $scope.$broadcast，但这样所有子元素都会收到。

这里的通信是指调用函数或类似的操作。不想设置监视项会堵塞脏检查循环。

如何以最佳方式使 dctv1 通知 dctv2，并使它们松耦合？我应该能够删除 dctv2 而不会出错。

- user1506145

---

如果您选择了事件。您可以调用preventDefault和stopPropagation。实际上，$event是jQuery事件的一个实例。 - Raulucco

Answer 1

请查看AngularJS NgModelController以获得一些想法。

每个<dctv2>指令都需要注入其控制器<dvtv1>。然后，您可以将对象或回调添加到该控制器的属性中，并在销毁<dctv2>时将它们删除。 <dvtv1>不会直接与子元素通信，但会触发绑定到其属性的回调函数。

例如； NgModelController有一个$parsers和$formatters函数回调数组。您可以将自己的函数推入数组来扩展该控制器的行为。

当NgModelController执行输入验证时，它基本上通过这些属性与其他指令进行通信。

- Reactgular

---

我支持使用回调函数来实现主要的想法（每个dctv2实例都将注册自己的回调函数），但是我会让NgModelController保持不变。 - Benjamin

@Benjamin 你可以进一步阐述你的想法吗？ - Wei-jye

@Wei-jye，我认为NgModelController在这里不是一个好的例子。我建议使用require:'^dctv1'来获取对父控制器的引用。然后，向该父级注册（dctv1.registerChild(self)）。之后，dctv1就知道了它的子元素并可以与它们交互。 - Benjamin

@Benjamin 是的，我刚刚做到了。我使用了这种方法来进行事件注册并触发事件。 - Wei-jye

Answer 2

一种方法是创建一个与所需控制器通信的服务/工厂。

例如，这是一个getter/setter工厂。

.factory('factoryName', function () {

    var something = "Hello";

    return {

        get: function () {
            return something;
        },

        set: function (keyword) {
            something = keyword;
            return something ;
        }
    };

}])

然后在你的控制器中：

.controller('controllerOne', ['factoryName', function (factoryName) {
    $scope.test = factoryName.get();
}]);

.controller('controllerTwo', ['factoryName', function (factoryName) {
    $scope.test = factoryName.get();
    $scope.clickThis = function (keyword) {
        factoryName.set(keyword);
    };
}]);

我建议阅读这个：一个控制器可以调用另一个控制器吗？

- eHx

Answer 3

我建议使用Angular服务。这样，您可以将行为解耦为一个或多个服务。

还可以看看这个：AngularJS：如何观察服务变量？

- eenagy

Answer 4

您可以使用每个子元素的ID来管理它，该ID必须传递给父元素；父元素将使用该ID向后广播事件：仅当从父元素传递的ID是其自己的ID时，子元素才会执行操作。

再见

- Giulio Molinari