详解详解angularJs中自定义中自定义directive的数据交互的数据交互
就我对directive的粗浅理解，它一般用于独立Dom元素的封装，应用场合为控件重用和逻辑模块分离。后者我暂时没接触，
但数据交互部分却是一样的。所以举几个前者的例子，以备以后忘记。
directive本身的作用域$scope可以选择是否封闭，不封闭则和其controller共用一个作用域$scope。例子如下：
<body ng-app="myApp" ng-controller="myCtrl">
<test-directive></test-directive>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.data = {
name:"白衣如花"
};
})
.directive("testDirective",function(){
return {
restrict:"E",
template:"<h1>{{data.name||'未定义'}}</h1>"
}
});
</script>
</body>
显示结果为：白衣如花，可以知道directive中的data.name就是myCtrl控制器中的$scope.data.name。
那么封闭的directive呢？怎么封闭，封闭效果是什么样的，封闭后怎么数据交互？这些都是我这几天摸索的东西。
<body ng-app="myApp" ng-controller="myCtrl">
<test-directive></test-directive>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.data = {
name:"白衣如花"
};
})
.directive("testDirective",function(){
return {
restrict:"E",
scope: {},
template:"<h1>{{data.name||'未定义'}}</h1>"
}
});
</script>
</body>
结果显示为：未定义。所以在directive定义时，添加属性scope就可以把directive的作用域和父控制器的作用域分离开来。
好，了解了开放和封闭之后，进入主题，如何进行数据交互。个人觉得数据交互分为：父控制器获取directive的变量；
directive获取父控制器的变量；父控制器调用directive的函数；directive调用父控制器的函数。
1.父控制器获取directive的变量。比如封装了一个输入框接受用户输入，父控制器点击搜索按钮要获取用户输入：
<body ng-app="myApp" ng-controller="myCtrl">
<p>名字：{{outerName}}</p>
<test-directive inner-name="outerName"></test-directive>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
})
.directive("testDirective",function(){
return {
restrict:"E",
scope: {
innerName: "="
},
template:"<input type='text' ng-model='innerName' placeholder='白衣如花'>"
}
});
</script>
</body>
显示结果如下：
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38589812
- 粉丝: 4
- 资源: 921
我的内容管理
展开
最新资源
- 多传感器数据融合手册：国外原版技术指南
- MyEclipse快捷键大全，提升编程效率
- 从零开始的编程学习：Linux汇编语言入门
- EJB3.0实例教程：从入门到精通
- 深入理解jQuery源码：解析与分析
- MMC-1电机控制ASSP芯片用户手册
- HS1101相对湿度传感器技术规格与应用
- Shell基础入门：权限管理与常用命令详解
- 2003年全国大学生电子设计竞赛：电压控制LC振荡器与宽带放大器
- Android手机用户代理(User Agent)详解与示例
- Java代码规范：提升软件质量和团队协作的关键
- 浙江电信移动业务接入与ISAG接口实战指南
- 电子密码锁设计：安全便捷的新型锁具
- NavTech SDAL格式规范1.7版：车辆导航数据标准
- Surfer8中文入门手册：绘制等高线与克服语言障碍
- 排序算法全解析：冒泡、选择、插入、Shell、快速排序
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
