首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解angularJs中自定义directive的数据交互

Posted in Javascript onJanuary 13, 2017

 就我对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>

显示结果如下：

详解angularJs中自定义directive的数据交互

分析：从数据流向说起，testDirective中的一个input输入绑定在innerName中，innerName是directive私有作用域拥有的变量，外部控制器不能直接用。通过innerName: "="传递给html中的inner-name属性，

而inner-name属性则绑定在外部控制器的outerName变量中，所以最后显示在最上面的<p>标签内。上述代码等价于如下代码：

<test-directive name="outerName"></test-directive>
scope: {
  innerName: "=name"
},

由inerName: "="变成了innerName: "=name"，而html属性绑定也由inner-name变成了name。

 2.directive获取父控制器的变量。这个应用场合应该挺多的，比如公共的页眉页脚，公共的展示面板等。

这个用上面例子的"="一样可以实现，于是我们知道了"="是双向绑定。但是我们要防止directive内部意外修改数据该怎么办呢？于是单向绑定"@"就出场了。

<body ng-app="myApp" ng-controller="myCtrl">
<input type='text' ng-model='outerName' placeholder='白衣如花'>
<test-directive inner-name="{{outerName}}"></test-directive>
<script>
  angular.module("myApp",[])
      .controller("myCtrl",function($scope){
      })
      .directive("testDirective",function(){
        return {
          restrict:"E",
          scope: {
            innerName: "@"
          },
          template:"<p>名字：{{innerName}}</p>" +
          "<button ng-click='innerName=innerName+1'>点击</button>"
        }
      });
</script>
</body>

值得注意的是：@在html的属性绑定时需要{{}}开标识，而=则不用。我的理解是，对于父控制器而言，@是数据传递，而=是数据绑定，所以有这些区别。directive中加入了一个按钮用于验证修改数据后

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

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

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

<body ng-app="myApp" ng-controller="myCtrl">
<p>名字：{{outerName}}</p>
<test-directive on-click="click(name)"></test-directive>
<script>
  angular.module("myApp",[])
      .controller("myCtrl",function($scope){
        $scope.click = function (name) {
          $scope.outerName = name || "白衣如花";
        }
      })
      .directive("testDirective",function(){
        return {
          restrict:"E",
          scope: {
            onClick: "&"
          },
          template:"<input type='text' ng-model='innerName' placeholder='白衣如花'>" +
          "<button ng-click='onClick({name: innerName})'>点击</button>"
        }
      });
</script>
</body>

数据传递流程和之上的例子差不多，唯一要注意的是参数传递时，{name: innerName}前者是形参，后者是实参。多个参数时，参数顺序不重要，形参一一对应。

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

<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="click()">重置</button>
<test-directive action="action"></test-directive>
<script>
  angular.module("myApp",[])
      .controller("myCtrl",function($scope){
        $scope.action = {};
        $scope.click = function () {
          $scope.action.reset();
        }
      })
      .directive("testDirective",function(){
        return {
          restrict:"E",
          scope: {
            action: "="
          },
          template:"<input type='text' ng-model='name' placeholder='白衣如花'>",
          controller: function ($scope) {
            $scope.action.reset = function () {
              $scope.name = "白衣如花"
            }
          }
        }
      });
</script>
</body>

又一次用到了=，利用了js中函数也是属性的原理。似乎，理解了=的双向绑定，就很容易调用directive内部函数了。但是初始化呢？

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

<body ng-app="myApp" ng-controller="myCtrl">
<test-directive action="action"></test-directive>
<script>
  angular.module("myApp",[])
      .controller("myCtrl",function($scope){
        $scope.action = {};
        $scope.action.init();
      })
      .directive("testDirective",function(){
        return {
          restrict:"E",
          scope: {
            action: "="
          },
          template:"<input type='text' ng-model='name' placeholder='白衣如花'>",
          controller: function ($scope) {
            $scope.action.init = function () {
              $scope.name = "白衣如花"
            }
          }
        }
      });
</script>
</body>

但是运行却发现，错误显示$scope.action.init is not a function，看提示应该是运行到第7行的时候，$scope.action.init函数还未定义。怎么办呢？把directive提到controller之前试试？一样是错误。

嗯，可以不用函数，直接在directive的controller中执行$scope.name = "白衣如花",似乎很完美，但如果是有参数的初始化呢？事实上js分离后，我遇到的问题是根据http请求的返回结果来初始化directive，由于

网络快慢不一定，导致控件初始化时不一定有http请求的返回（没有有效的初始化参数），也不能保证http请求返回后directive已经初始化（不能用=来进行函数调用）。 

需求很明了了，如果能监控参数变化，再执行初始化，此时能保证directive已经加载，而且有有效的参数。正好angularjs提供了$watch。代码如下：

<body ng-app="myApp" ng-controller="myCtrl">
<test-directive action="action"></test-directive>
<script>
  angular.module("myApp",[])
      .controller("myCtrl",function($scope){
        $scope.action = {name: "白衣如花"};
      })
      .directive("testDirective",function(){
        return {
          restrict:"E",
          scope: {
            action: "="
          },
          template:"<input type='text' ng-model='name' placeholder='白衣如花'>",
          link: function (scope, elem, attrs) {
            scope.$watch(attrs.action, function (value) {
              scope.action.init();
            })
          },
          controller: function ($scope) {
            $scope.action.init = function () {
              $scope.name = $scope.action.name
            }
          }
        }
      });
</script>
</body>

这是我对于directive数据交互的粗浅理解。想要更详细了解，请参看官方文档：https://docs.angularjs.org/guide/directive

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解angularJs中自定义directive的数据交互

- Author -

白衣如花

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
JS实现购物车特效
Feb 02 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 #Javascript
很棒的一组js图片轮播特效
Jan 12 #Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 #Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 #Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 #Javascript
js实现微博发布小功能
Jan 12 #Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 #Javascript
Spring-Retry(1) 多维数组(1) ICF-5900W(2) EventBus(1) Fragment(1) Spring Boot(5) 多线程(6) Sqlite(2) OpenLayer(1) IDEA(2)
You might like
PHP设计聊天室步步通
2006/10/09 PHP
用PHP调用数据库的存贮过程！
2006/10/09 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
浅析PHP Socket技术
2013/08/02 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php实现对象克隆的方法
2015/06/20 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
MooTools 1.2介绍
2009/09/14 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python实现发送邮件功能代码
2017/12/14 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python实现名片管理系统
2020/02/14 Python
python实现交并比IOU教程
2020/04/16 Python
豆腐の盛田屋官网：日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
Crocs欧洲官网：Crocs Europe
2020/01/14 全球购物
美国在线购买空气净化器、除湿器、加湿器网站：AllergyBuyersClub
2021/03/16 全球购物
什么是Oracle的后台进程background processes？都有哪些后台进程？
2012/04/26 面试题
人代会标语
2014/06/30 职场文书
医德考评自我评价
2014/09/14 职场文书
党员评议个人总结
2014/10/20 职场文书
生产现场禁烟通知
2015/04/23 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle