首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >指令如何通过控制器进行通信?

指令如何通过控制器进行通信?
EN

Stack Overflow用户
提问于 2013-03-08 16:29:54
回答 1查看 6.6K关注 0票数 18

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

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

我不太明白,他们是怎么和控制员沟通的?有没有它的例子或演示?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-08 17:00:54

也许您混淆了路由更改时创建的控制器和指令控制器。这一节只讨论指令控制器,所以这一节的意思是,如果你在同一个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>
票数 34
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15289670

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档