我们首先看下面的例子：

！doctype html html ng-app=' my module ' head meta charset=' utf-8 ' link rel='样式表href=' CSS/bootstrap-3。0 .0/CSS/bootstrap。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '/head body hello/hello/hello/hello/body脚本src=' http : framework/angular-1。3 .0 .14 jsangular .我们在看看隔离作用中的代码：

var myModule=angular。module(' myModule '，[])；myModule.directive('hello '，function(){ return { restrict : ' AE '，template : ' divinput type=' text ' ng-model=' userName '/{ { userName } }/div '，替换： true } })；这时候当运行页面的时候发现只要有一个投入中的输入变化了，这时候所有的nput的内容都会变化：

这样就会面临一个问题：我们的指令无法单独使用，于是就有了独立作用域的概念。

var myModule=angular。module(' myModule '，[])；myModule.directive('hello '，function(){ return { restrict : ' AE '，scope : }，' template : ' divinput type=' text ' ng-model=' userName '/{ { userName } }/div '，替换： true } })；通过把范围设置为{},那么每一个指令就具有自己独立的范围空间，于是就不会相互影响了。但是angularjs中最重要的概念是：绑定策略。其具有绑定策略如下：

第一步：我们看看原始的方式，也就是不使用上面的三种绑定方式

！doctype html html ng-app=' my module ' head meta charset=' utf-8 ' link rel='样式表href=' CSS/bootstrap-3。0 .0/CSS/bootstrap。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/头体！-控制器我的计算机的ctrl按键下面有指令喝吧，同时指令喝还有自定义的属性风味，其值为'百威- div ng-controller='MyCtrl '饮料口味=' { { ctrl lavor } } '/饮料/div /body脚本src=' http :框架/angular-1。3 .0 .14/棱角分明。js /脚本脚本src=' http : scopeat。js /脚本/html看看示波器ate中的内容：

var myModule=angular。module(' myModule '，[])；myModule.controller('MyCtrl '，['$scope '，function($ scope){ $ scope。ctrlflavor='百威；//在控制器中$范围中设置了ctrlFlavor属性}]) //定义了喝指令myModule.directive('饮品，function(){ return { restrict : ' AE '，template: ' div { {风味}}/div '，link:function(作用域、元素、属性){ scope。风味=属性。风味；//链接的时候把喝指令上的风味属性放在范围中，然后在模板中显示} } });这时候的数字正射影像图结构如下：

但是，这种方式要通过attrs。风味来获取这个指令的属性值，然后需要把这个属性值绑定到范围对象上，最后在模板中才能通过{{}}这种形式获取到范围中的值！

第二步：我们使用上面的@来替换第一种方式，因为它每次都需要自己指定环函数：

var myModule=angular。module(' myModule '，[])；myModule.controller('MyCtrl '，['$scope '，function($ scope){ $ scope。ctrlflavor='百威；//在控制器中$范围中设置了ctrlFlavor属性}]) //定义了喝指令myModule.directive('饮品，function(){ return { restrict : ' AE '，scope:{ flavor:'@' }，template : ' div { { flavor } }/div ' })；这种方式就是把指令喝中的风味属性值绑定到范围对象上，而且这是尼日利亚为我们自动绑定的。不过，@绑定绑定的是字符串，而不是对象！

第三步：我们来学习一下双向数据绑定

！doctype html html ng-app=' MyModule ' head meta charset=' utf-8 ' link rel='样式表' href=' CSS/bootstrap-3 . 0 . 0/CSS/bootstrap . CSS ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow '/head body！-指定了控制器myctrl-div ng-controller=' myctrl ' ctrl 3360 br！-第一个输入框的输入值绑定到控制器MyCtrl对应的ctrl lavor值-输入类型=' text ' ng-model=' ctrl lavor ' br directive 3360 br！-第二个输入框由指令完成-drink flavor=' ctrl flavor '/drink/div/body script src=' http 3360 framework/angular-1 . 3 . 0 . 14/angular . js '/script script src=' http 3360 scope equal . js '/script

var myModule=angular . module(' myModule '，[])；//指定了controller对象mymodule.controller ('myctrl '，['$ scope '，function($ scope){ $ scope . ctrl flavor=' Budweiser ')；}])//指定指令mymodule.directive('饮料'，function(){ return { restrict 3360 ' AE '，scope : { flavor 3360 '='//这里，饮料指令的flavor和作用域内的双向数据绑定是用'='指定的！}，template: '输入类型='text' ng-model='风味'/' } })；这是“=”的绑定方式。它实现了双向数据绑定策略。让我们看看最终的DOM结构是什么样的：

其实双向数据绑定饮品风味=' ctrlFlavor '/饮品很明显，所以需要了解双向数据绑定(指令和控制器之间的双向数据绑定)

第四步：我们使用绑定策略调用控制器的父方法：

！doctype html html ng-app=' MyModule ' head meta charset=' utf-8 ' link rel='样式表' href=' CSS/bootstrap-3 . 0 . 0/CSS/bootstrap . CSS ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow '/head body div ng-controller=' MyCtrl '！-有三个自定义指令-问候语=' sayhello (name)'/问候语=' sayhello(name)'/问候语=' say hello(name)'/问候语/div /body脚本src=' http : framework/angular-1 . 3 . 0 . 14/angular . js '/脚本脚本src=' http 3360 scoped . js '/脚本/Html定义了三个指令问候语，每个指令都需要调用控制器中的say hello方法。(如何在angularjs中实现控制器和指令的交互指出控制器和指令可以通过定义属性进行交互，但这里我们可以简单的完成同样的功能)并传入不同的参数名值：

var myModule=angular . module(' myModule '，[])；//为控制器指定了sayHello方法，并指定了参数mymodule.controller ('myctrl '，['$ scope '，function ($ scope) {$ scope。sayhello=函数(名称){alert ('hello '名称)可以传入此方法；} }])my module . directive(' helling '，function(){ return { restrict 3360 ' AE '，scope : { greet : ' '//从父作用域传递一个函数供以后调用以获取greet参数。获取sayHello(名称)函数}。//在模板中，我们通过调用控制器中的greet方法在ng-click中指定一个参数。传入参数名的值为username /，即参数template: '输入类型=' text ' ng-model=' userName '/br/' button class=' BTN BTN-default ' ng-click=' greet({ name : userName })' helling/button br/' } })；您可以通过调用父操作方法，而不是使用传统的为指令指定属性的方式来完成控制器和指令之间的通信！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。