AngularJS指令与指令交互功能示例

本文阐述了AngularJS指令之间的交互功能。分享给大家参考，如下：

在之前的文章《AngularJS指令与控制器之间的交互功能示例》中，我们了解了指令和控制器之间的交互。接下来，我们将看看指令如何相互作用。

1.首先，让我们了解什么是独立范围

为了更好地理解独立范围，让我们看一段代码：

div ng-controller=' my controller 1 ' hello/hello hello/div var app=angular . module(' first app '，[])；//app模块名app.controller ('mycontroller 1 '，['$ scope '，function($ scope){ }])；app.directive('hello '，function(){ return { restrict : ' E '，template : ' divinput type=' text ' ng-model=' username '/{ { username } } '，Replace:true }})我们定义了一个指令，并在html中调用了两次。我们发现调用它两次的结果是用同一条指令构建的作用域共享一个数据。结果如下。当我们在一个输入框中输入数据时，它会在第二条指令中改变输入框。

如何解决这个问题，我们需要为指令生成一个独立的作用域。每次使用指令时，生成的作用域都是独立的，我们只需要按如下方式修改即可：

App.directive ('hello '，function(){ return { restrict : ' e '，scope : }，' template3360' div输入类型=' text ' ng-model=' username '/{ { username } } '，replace: true})结果

2.指令之间的交互和指令的继承

(1)首先，我们按照以下方式定义父指令：

App.directive('父亲'、function(){ return { restrict : ' e '、scope : }、controller : function($ scope){ this。mean1=function () {console.log('这是第一个方法.');};这个。意味着2=函数(){控制台。log('这是第二种方法.');};这个。mean3=函数(){控制台。log('这是第三种方法.');} } }});我们注意到指令中还有一个控制器，不同于控制器定义过程。这里的控制器指的是在指令的独立范围内定义的一些方法。

(2)定义一个子指令，其中可以使用父指令范围内的方法：

app . direction(' child first '，function(){ require:'^father'，link:function(scope，ele，attr，父Ctrl){父ctrl . mean 1()；}})这样传递：

require:'^father'子指令可以继承和使用父指令中独立范围内的一些方法。此时，我们的链接函数可以有第四个参数。

链接和控制器中方法的区别：

链接中的方法是需要执行或将立即执行的方法。

控制器中的方法是一些希望对外公开的方法。

总结：

指令之间的交互由外部指令通过指令控制器中公开的方法来使用。

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。