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

时间 2019-11-20
标签详解 angularjs 自定义 directive 数据交互栏目 AngularJS 繁體版
原文原文链接
就我对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>
显示结果以下：

分析：从数据流向提及，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