詳解angularJs中自定義directive的數(shù)據(jù)交互

更新時間：2017年01月13日 08:21:04 作者：白衣如花

這篇文章主要介紹了詳解angularJs中自定義directive的數(shù)據(jù)交互，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

就我對directive的粗淺理解，它一般用于獨(dú)立Dom元素的封裝，應(yīng)用場合為控件重用和邏輯模塊分離。后者我暫時沒接觸，但數(shù)據(jù)交互部分卻是一樣的。所以舉幾個前者的例子，以備以后忘記。

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>

顯示結(jié)果為：白衣如花，可以知道directive中的data.name就是myCtrl控制器中的$scope.data.name。

那么封閉的directive呢？怎么封閉，封閉效果是什么樣的，封閉后怎么數(shù)據(jù)交互？這些都是我這幾天摸索的東西。

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

結(jié)果顯示為：未定義。所以在directive定義時，添加屬性scope就可以把directive的作用域和父控制器的作用域分離開來。

好，了解了開放和封閉之后，進(jìn)入主題，如何進(jìn)行數(shù)據(jù)交互。個人覺得數(shù)據(jù)交互分為：父控制器獲取directive的變量；directive獲取父控制器的變量；父控制器調(diào)用directive的函數(shù)；directive調(diào)用父控制器的函數(shù)。

1.父控制器獲取directive的變量。比如封裝了一個輸入框接受用戶輸入，父控制器點(diǎn)擊搜索按鈕要獲取用戶輸入：

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

顯示結(jié)果如下：

分析：從數(shù)據(jù)流向說起，testDirective中的一個input輸入綁定在innerName中，innerName是directive私有作用域擁有的變量，外部控制器不能直接用。通過innerName: "="傳遞給html中的inner-name屬性，

而inner-name屬性則綁定在外部控制器的outerName變量中，所以最后顯示在最上面的<p>標(biāo)簽內(nèi)。上述代碼等價于如下代碼：

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

由inerName: "="變成了innerName: "=name"，而html屬性綁定也由inner-name變成了name。

2.directive獲取父控制器的變量。這個應(yīng)用場合應(yīng)該挺多的，比如公共的頁眉頁腳，公共的展示面板等。

這個用上面例子的"="一樣可以實(shí)現(xiàn)，于是我們知道了"="是雙向綁定。但是我們要防止directive內(nèi)部意外修改數(shù)據(jù)該怎么辦呢？于是單向綁定"@"就出場了。

<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'>點(diǎn)擊</button>"
        }
      });
</script>
</body>

值得注意的是：@在html的屬性綁定時需要{{}}開標(biāo)識，而=則不用。我的理解是，對于父控制器而言，@是數(shù)據(jù)傳遞，而=是數(shù)據(jù)綁定，所以有這些區(qū)別。directive中加入了一個按鈕用于驗證修改數(shù)據(jù)后

父控制器是否發(fā)生改變，結(jié)果是=有變化，@無變化，很容易得出結(jié)論：=是雙向綁定，@是雙向綁定。

3.directive調(diào)用父控制器的函數(shù)。應(yīng)用場合，暫時想不到（汗）。

變量用=和@來傳遞，函數(shù)則用&。例子如下：

<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})'>點(diǎn)擊</button>"
        }
      });
</script>
</body>

數(shù)據(jù)傳遞流程和之上的例子差不多，唯一要注意的是參數(shù)傳遞時，{name: innerName}前者是形參，后者是實(shí)參。多個參數(shù)時，參數(shù)順序不重要，形參一一對應(yīng)。

4.父控制器調(diào)用directive的函數(shù)。這個是前段時間遇到的難點(diǎn)，情況較其他復(fù)雜一些。應(yīng)用場合也很普遍，比如初始化，重置等。

<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中函數(shù)也是屬性的原理。似乎，理解了=的雙向綁定，就很容易調(diào)用directive內(nèi)部函數(shù)了。但是初始化呢？

首先想到的是類似的=來引用傳遞：

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

但是運(yùn)行卻發(fā)現(xiàn)，錯誤顯示$scope.action.init is not a function，看提示應(yīng)該是運(yùn)行到第7行的時候，$scope.action.init函數(shù)還未定義。怎么辦呢？把directive提到controller之前試試？一樣是錯誤。

嗯，可以不用函數(shù)，直接在directive的controller中執(zhí)行$scope.name = "白衣如花",似乎很完美，但如果是有參數(shù)的初始化呢？事實(shí)上js分離后，我遇到的問題是根據(jù)http請求的返回結(jié)果來初始化directive，由于

網(wǎng)絡(luò)快慢不一定，導(dǎo)致控件初始化時不一定有http請求的返回（沒有有效的初始化參數(shù)），也不能保證http請求返回后directive已經(jīng)初始化（不能用=來進(jìn)行函數(shù)調(diào)用）。

需求很明了了，如果能監(jiān)控參數(shù)變化，再執(zhí)行初始化，此時能保證directive已經(jīng)加載，而且有有效的參數(shù)。正好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數(shù)據(jù)交互的粗淺理解。想要更詳細(xì)了解，請參看官方文檔：https://docs.angularjs.org/guide/directive

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: