,就我对指令的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离。后者我暂时没接触,但数据交互部分却是一样的,所以举几个前者的例子,以备以后忘记。
指令本身的作用域范围可美元以选择是否封闭,不封闭则和其控制器共用一个作用域范围。美元例子如下:
& lt;身体ng-app=ng-controller“myApp”=癿yCtrl”比;
& lt; test-directive> & lt;/test-directive>
& lt; script>
angular.module (“myApp”, [])
范式(“myCtrl函数(范围){
美元的范围。data=https://www.yisu.com/zixun/{
名称:“白衣如花”
};
})
.directive (“testDirective函数(){
返回{
限制:“E”,
模板:“& lt; h2> {{data.name | |”未定义’}}& lt;/h2>”
}
});
& lt;/script>
& lt;/body>
显示结果为:白衣如花,可以知道指令中的data.name就是myCtrl控制器中美元的scope.data.name只
,那么封闭的指令呢?怎么封闭,封闭效果是什么样的,封闭后怎么数据交互?这些都是我这几天摸索的东西。
& lt;身体ng-app=ng-controller“myApp”=癿yCtrl”比;
& lt; test-directive> & lt;/test-directive>
& lt; script>
angular.module (“myApp”, [])
范式(“myCtrl函数(范围){
美元的范围。data=https://www.yisu.com/zixun/{
名称:“白衣如花”
};
})
.directive (“testDirective函数(){
返回{
限制:“E”,
范围:{},
模板:“& lt; h2> {{data.name | |”未定义’}}& lt;/h2>”
}
});
& lt;/script>
& lt;/body>
之前
结果显示为:未定义,所以在指令定义时,添加属性范围就可以把指令的作用域和父控制器的作用域分离开来。
好了,解了开放和封闭之后,进入主题,如何进行数据交互。个人觉得数据交互分为:父控制器获取指令的变量;指令获取父控制器的变量;父控制器调用指令的函数,指令调用父控制器的函数。
1。父控制器获取指令的变量。比如封装了一个输入框接受用户输入,父控制器点击搜索按钮要获取用户输入:
& lt;身体ng-app=ng-controller“myApp”=癿yCtrl”比;
& lt; p>名字:{{outerName}} & lt;/p>
& lt; test-directive inner-name=" outerName "祝辞& lt;/test-directive>
& lt; script>
angular.module (“myApp”, [])
范式(“myCtrl函数(范围){
})
.directive (“testDirective函数(){
返回{
限制:“E”,
范围:{
innerName:“=?
},
模板:“& lt;输入type='文本' ng-model=癷nnerName”占位符=鞍滓氯缁ā痹凇?
}
});
& lt;/script>
& lt;/body>
之前
显示结果如下:
分析:从数据流向说起,testDirective中的一个输入输入绑定在innerName中,innerName是指令私有作用域拥有的变量,外部控制器不能直接用。通过innerName:”=按莞鴋tml中的inner-name属性,
而inner-name属性则绑定在外部控制器的outerName变量中,所以最后显示在最上面的& lt; p>标签内。上述代码等价于如下代码:
& lt; test-directive name=" outerName祝辞& lt;/test-directive>
范围:{
innerName:”=?
},
由inerName:“=北涑闪薸nnerName:”=?而html属性绑定也由inner-name变成了名字。
, 2.指令获取父控制器的变量。这个应用场合应该挺多的,比如公共的页眉页脚,公共的展示面板等。
这个用上面例子的"="一样可以实现,于是我们知道了“=笔撬虬蠖ā５俏颐且乐怪噶钅诓恳馔庑薷氖莞迷趺窗炷?于是单向绑定“@”就出场了。
& lt;身体ng-app=ng-controller“myApp”=癿yCtrl”比;
& lt;输入类型=拔谋尽眓g-model=皁uterName”占位符=鞍滓氯缁ǖ淖４?
& lt; test-directive inner-name=" {{outerName}}”祝辞& lt;/test-directive>
& lt; script>
angular.module (“myApp”, [])
范式(“myCtrl函数(范围){
})
.directive (“testDirective函数(){
返回{
限制:“E”,
范围:{
innerName:“@”
},
模板:“& lt; p>名字:{{innerName}} & lt;/p>”+
“& lt;按钮ng-click=' innerName=innerName + 1的祝辞点击& lt;/button>”
}
});
& lt;/script>
& lt;/body>
