就我对指令的理解，一般是用来封装独立的Dom元素，其应用是控制复用和逻辑模块分离。后者我暂时没接触过，但数据交互部分是一样的。所以举一些前者的例子，以防以后忘记。

指令自身的作用域$scope可以关闭，也可以不关闭。如果没有关闭，它将与其控制器共享一个scope $scope。例子如下：

body ng-app=' myapp ' ng-controller=' my ctrl ' test-directive/test-directive脚本angular.module ('myapp '，[])。controller ('myctrl '，function($ scope){ $ scope . data={ name : '白色像朵花' }。}).指令(' test directive '，function(){ return { restrict : ' e '，template3360 ' h1 { { data。name | | ' undefined ' } }/h1 ' })；/script/body显示：白色像一朵花，所以可以知道data.name在指令中是$scope.data.name在myCtrl控制器中。

封闭指令呢？如何结账，结账效果如何，结账后如何交换数据？这些都是我这几天一直在摸索的东西。

body ng-app=' myapp ' ng-controller=' my ctrl ' test-directive/test-directive脚本angular.module ('myapp '，[])。controller ('myctrl '，function($ scope){ $ scope . data={ name : '白色像朵花' }。}).指令(' test directive '，function(){ return { restrict : ' e '，scope: {}，template 3360 ' h1 { { data }。name | | ' undefined ' } }/h1 ' })；/script/body的结果显示为：未定义。因此，在定义指向性时，通过增加属性scope，可以将指向性的范围与父控制器的范围分开。

好了，了解开闭所后，进入题目，如何交换数据。个人认为，数据交互分为：父控制器获取指令变量；指令获取父控制器的变量；父控制器调用直接的函数；指令调用父控制器的函数。

1.父控制器获得指令变量。例如，一个输入框被封装以接受用户输入，并且父控制器点击搜索按钮以获得用户输入：

body ng-app=' myapp ' ng-controller=' my ctrl ' pname:{ { outname } }/ptest-directiveinner-name=' outname '/test-directscriptangular . module(' myapp '，[])。控制器(' myCtrl '，函数($scope){ })。指令(' testDirective '，function(){ return { restrict : ' E '，scope: { innerName: '=' }，Template : '输入类型=' text' ng-model=' innername '占位符='白如花' ' } })；/script/body显示以下结果：

分析：从数据流的角度来看，testDirective中的一个输入输入绑定到innerName，innerName是Directivity私有作用域拥有的变量，不能被外部控制器直接使用。通过innerName: '='传递给html中的内部名称属性，

而内部名称属性绑定到外部控制器的外部名称变量，因此它最终显示在顶部的p标签中。上述代码相当于以下代码：

test-directivename=' outname '/test-directiviscope : { innername3360'=name ' }，从inername3360'='更改为inner name 3360 '=name '，html属性绑定从inner-name更改为name。

2.直接获取父控制器的变量。应该有很多应用，比如公共页眉页脚，公共显示面板等等。

这可以通过使用上面例子中的'='来实现，所以我们知道'='是一个双向绑定。但是我们应该做些什么来防止指令内的意外数据修改呢？于是单向绑定“@”就出来了。

body ng-app=' myApp ' ng-controller=' myCtrl '输入类型=' text ' ng-model=' outname '占位符='白衣如花test-direction inner-name=' { { ExternaL name } } '/test-directionwisscript angular。模块(' myApp '，[]).控制器(“我的Ctrl”，函数($scope){ }).指令(' testDirective '，function(){ return { restrict : ' E '，scope: { innerName: '@' }，template:'p名字：{{innerName}}/p“”按钮ng-click='innerName=innerName 1 '点击/button ' } })；/脚本/正文值得注意的是：@在超文本标记语言的属性绑定时需要{{}}开标识，而=则不用。我的理解是，对于父控制器而言，@是数据传递，而=是数据绑定，所以有这些区别指令。中加入了一个按钮用于验证修改数据后

父控制器是否发生改变，结果是=有变化，@无变化，很容易得出结论：=是双向绑定，@是双向绑定。

3 .指令调用父控制器的函数。应用场合，暂时想不到（汗)。

变量用=和@来传递，函数则用。例子如下：

body ng-app=' myApp ' ng-controller=' myCtrl ' p名字：{ {外套名称} }/ptest-指令点击='点击(名称)'/测试方向角度。模块(' myApp '，[]).控制器(“我的Ctrl”，函数($scope){ $scope.click=函数(名称){ $ scope。outname=name | | '白衣如花；} }) .指令(“测试指令”)，函数(){ return { restrict:'E '，scope: { onClick: '' }，template: '输入类型='text' ng-model='innerName '占位符='白衣如花''按钮ng-click=' OnClick({ name :内部名称})'点击/button ' } })；/脚本/正文数据传递流程和之上的例子差不多，唯一要注意的是参数传递时，{name: innerName}前者是形参，后者是实参。多个参数时，参数顺序不重要，形参一一对应。

4.父控制器调用管理的的函数。这个是前段时间遇到的难点，情况较其他复杂一些。应用场合也很普遍，比如初始化，重置等。

body ng-app=' myApp ' ng-controller=' myCtrl '按钮ng-click=' click()'重置/button test-directive action=' action '/test-directivescript angular。模块(' myApp '，[]).控制器(“我的Ctrl”，函数($ scope){ $ scope。操作={ }；$ scope。click=function(){ $ scope。行动。reset()；} }) .指令(“测试指令”)，函数(){ return { restrict:'E '，scope: { action: '=' }，template: '输入类型=' text ' ng-model=' name ' placeholder='白衣如花，控制器：函数($ scope){ $ scope。行动。reset=function(){ $ scope。名称='白衣如花' } } } });/脚本/正文又一次用到了=,利用了射流研究…中函数也是属性的原理。似乎，理解了=的双向绑定，就很容易调用管理的内部函数了。但是初始化呢？

首先想到的是类似的=来引用传递：

body ng-app=' myApp ' ng-controller=' myCtrl ' test-directional action=' action '/test-directionivescript angular。模块(' myApp '，[]).控制器(“我的Ctrl”，函数($ scope){ $ scope。操作={ }；$ scope。行动。init()；}) .指令(“测试指令”)，函数(){ return { restrict:'E '，scope: { action: '=' }，template: '输入类型=' text ' ng-model=' name ' placeholder='白衣如花，控制器：函数($ scope){ $ scope。行动。init=function(){ $ scope。名称='白衣如花' } } } });/脚本/正文但是运行却发现，错误显示$scope.action.init不是函数，看提示应该是运行到第七行的时候，$scope.action.init函数还未定义。怎么办呢？把管理的提到控制器之前试试？一样是错误。

好吧，你可以在没有函数的指令控制器中直接执行$scope.name=' white as a flower '，这看起来很完美，但是如果用参数初始化呢？事实上，在分离js之后，我遇到的问题是根据http请求的返回结果初始化指令，因为

网络速度不确定，导致初始化控件时可能不会返回http请求(没有有效的初始化参数)，也不能保证返回http请求后指令已经初始化(=不能用于函数调用)。

要求很明确。如果您可以监视参数更改，然后执行初始化，则可以确保指令已经加载并且具有有效的参数。碰巧的是，angularjs提供了100美元的手表.代码如下：

body ng-app=' myapp ' ng-controller=' my ctrl ' test-directive action=' action '/test-directive script angular . module(' myapp '，[])。控制器(' myctrl '，函数($ scope){ $ scope . action={ name :}) .指令(' testDirective '，function(){ return { restrict : ' E '，scope: { action: '=' }，Template : '输入类型=' text' ng-model=' name '占位符=' white as a flower '，link : function (scope，elem，attrs) {scope。$ watch (attrs。动作、函数(值){范围。action . init()；}) }，controller : function($ scope){ $ scope . action . init=function(){ $ scope . name=$ scope . action . name } } })；/script/body这是我对指令数据交互的粗浅理解。更多详情请参考官方文件：https://docs.angularjs.org/guide/directive

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