背景介绍

这个例子是视频中的一个例子。有一个超级动作英雄，有三个能力：力量、速度和夜光。

这三个能力是三个属性，超级动作英雄定义为标签，只要加上相应的属性，就可以拥有这些能力。

为了显示结果，将鼠标响应事件添加到标签中。当鼠标移动到相应的标签时，将触发一个方法来打印出功能。

程序分析html部分的代码如下：

div超级注释！/超人力量超人力量！/超人超人力量速度力量速度！/超人超人实力速光实力速光！/超人/div我们来看看如何实现。首先，它仍然是创建一个模块：

var myApp module=angular . module(' myApp '，[])；

在此模块的基础上，创建标签超人，类似于上一个。

myAppModule.directive('超人')，function(){ return { scope : }，restrict:'AE '，transclude:true，template : ' div div ng-transclude/div/div '，controller : function($ scope){ $ scope . capabilities=[]；this . addstrength=function(){ $ scope . abilities . push(' strength ')；};this . addSpeed=function(){ $ scope . abilities . push(' speed ')；};this . addlight=function(){ $ scope . abilities . push(' light ')；};}，link:function(scope，element，attr){ element.bind('mouseenter '，function(){ console . log(scope . capabilities)；});} } });这里的区别在于方法内部有一个控制器属性，它不是像ng-controller那样的控制器，而是一个指令对外开放的接口。其中声明的方法可以对外作为公共方法使用，其他指令可以通过依赖来使用这些方法。

接下来，根据能力创建三个指令

myapp module . directive(' strength '，function(){ return { require:'^superman'，link:function(scope，element，attr，supermanctrl){ supermanctrl . addstrength()；} } });myAppModule.directive('speed '，function(){ return { require:'^superman'，link:function(scope，element，attr，supermanctrl){ supermanctrl . addspeed()；} } });myAppModule.directive('light '，function(){ return { require:'^superman'，link:function(scope，element，attr，supermanctrl){ supermanctrl . addlight()；} } });三条指令的代码相似，其中require指定了相关指令。

链接中有一个额外的参数supermanCtrl，应该是超人中的控制器，所以命名方法是超人Ctrl。

【因为不了解内部原理，这只是猜测，但是实验表明，如果更改这个参数的名称，就会报错。】

当这三个指令被声明时，它们可以用作超级属性。当指示此属性时，将触发内部链接中的方法，并调用超人中公开的方法。

总而言之，指令的交互过程：

1首先，创建一个基本指令，并在controller属性之后，添加公开可用的方法。

2.创建其他交互指令，并在require属性后添加相应的指令依赖项；在链接中调用公开的方法

所有程序代码：

！doctype html html ng-app=' myApp ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http :http://apps。bdimg。com/libs/angular。js/1。2 .16/棱角分明。量滴js '/脚本/头体div超级注释！/超人力量超人力量！/超人超人力量速度力量速度！/超人超人实力速光实力速光！/超人/div脚本类型=' text/JavaScript ' var myApp模块=angular。模块(' myApp '，[])；myAppModule.directive('超人)，function(){ return { scope : }，restrict:'AE '，transclude:true，template : ' div ng-transclude/div/div '，controller : function($ scope){ $ scope。能力=[]；这个。addstrength=function(){ $ scope。能力。推动(‘力量’)；};这个。addSpeed=function(){ $ scope。能力。推动(“速度”)；};这个。addlight=function(){ $ scope。能力。推动(‘轻’)；};}，link:function(作用域，元素，attr){ element.bind('mouseenter '，function(){ console。日志(范围。能力)；});} } });myapp模块。指令(' strength '，function(){ return { require:'^superman',link:function(scope,element,attr,supermanctrl){ supermanctrl。addstrength()；} } });myAppModule.directive('speed '，function(){ return { require:'^superman',link:function(scope,element,attr,supermanctrl){ supermanctrl。addspeed()；} } });myAppModule.directive('light '，function(){ return { require:'^superman',link:function(scope,element,attr,supermanctrl){ supermanctrl。addlight()；} } });/脚本/正文/html运行结果：

以上就是对AngularJS指令的交互的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！