详解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

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

Javascript 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
vue如何实现自定义底部菜单栏
Jul 01 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
You might like
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Maps Javascript
2007/01/22 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
python读写json文件的简单实现
2017/04/11 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
实例讲解Python爬取网页数据
2018/07/08 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python用requests实现http请求代码实例
2019/10/31 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Python request中文乱码问题解决方案
2020/09/17 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
《春笋》教学反思
2014/04/15 职场文书
成本会计实训报告
2014/11/05 职场文书
一年级语文教学随笔
2015/08/14 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
php png失真的原因及解决办法
2021/10/24 PHP