angularjs - 指令如何通过控制器进行通信？

Question

在本文档：http ://docs.angularjs.org/guide/directive中，它说指令可以通过控制器相互通信。

控制器- 控制器构造函数。控制器在预链接阶段之前被实例化，如果它们按名称请求它，它会与其他指令共享（参见 require 属性）。这允许指令相互通信并增强彼此的行为。

我不太明白，他们是如何与控制器通信的？是否有任何示例或演示？

Answer 1

也许您将在路由更改发生时创建的控制器与指令控制器混淆了。该部分仅讨论指令控制器，因此该部分的意思是，如果您在同一个 HTML 元素上有两个指令，它们可以通过要求彼此的控制器进行通信。

一个很好的例子是，如果您创建一个需要与ng-model. 由于ng-model公开了一个控制器，您可以像这样要求它：

myApp.directive('myDirective', function() {
    return {
        require: 'ngModel',
        link: function($scope, elem, attrs, ngModelCtrl) {
            // Here you can listen to different DOM events, and
            // call ngModelCtrl when the model value needs to update
        }
    }
});

和 HTML：

<input type="text" ng-model="myModel" my-directive>

您的指令可以通过在指令函数返回的对象中实现控制器来公开控制器，如下所示：

myApp.directive('myDirective1', function() {
    return {
        link: function($scope, elem, attrs) {

        },
        controller: function() {
            this.sayHello = function() {
                alert("hello!");
            }
        }
    }
});

myApp.directive('myDirective2', function() {
    return {
        require: 'myDirective1',
        link: function($scope, elem, attrs, myDirective1Ctrl) {
            myDirective1Ctrl.sayHello();
        }
    }
});

和 HTML：

<input type="text" my-directive2 my-directive1>

您还可以通过编写来要求父指令中的指令控制器require: '^myParentDirective'，如下所示：

myApp.directive('myDirective1', function() {
    return {
        link: function($scope, elem, attrs) {

        },
        controller: function() {
            this.sayHello = function() {
                alert("hello!");
            }
        }
    }
});

myApp.directive('myDirective2', function() {
    return {
        require: '^myDirective1',
        link: function($scope, elem, attrs, myDirective1Ctrl) {
            myDirective1Ctrl.sayHello();
        }
    }
});

和 HTML：

<div my-directive1>
    <div my-directive2></div>
</div>