angular中自定義指令的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)angular中自定義指令的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

自定義屬性的四種類(lèi)別

分為： 元素E，屬性A，注釋M，類(lèi)C , 分別如下：

 <my-dir></my-dir>
 <span my-dir="exp"></span>
 <!-- directive: my-dir exp -->
 <span class="my-dir: exp;"></span>

簡(jiǎn)單創(chuàng)建一個(gè)指令

html結(jié)構(gòu)：

<div ng-controller="myCtrl">
 <div my-customer></div>
</div>

JavaScript結(jié)構(gòu)：

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
   };
  }])
  .directive('myCustomer', function() {
   return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
   };
  });

輸出：

Name: Naomi Address: 1600 Amphitheatre

說(shuō)明： 此處，myCtrl 中定義的 $scope.customer 屬性和屬性值都在指令中的模板使用了。同樣的，在指令return 對(duì)象中的 template 也可被替換成一路徑，在路徑html中書(shū)寫(xiě)和template中同樣的代碼，使用這種方式，可以操作更多代碼。

templateUrl 函數(shù)式編程

html結(jié)構(gòu)：

<div ng-controller="myCtrl">
  <div my-customer></div>
</div>

javascript結(jié)構(gòu)：

 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
  $scope.customer = {
   name: 'Naomi',
   address: '1600 Amphitheatre'
  };
   }])
 .directive('myCustomer', function() {
  return {
   templateUrl: function(elem, attr) {
    return 'customer-' + attr.type + '.html';
   }
  };
 });

不同的templateUrl ①

 Name: {{customer.name}}

不同的templateUrl ②

 Address: {{customer.address}}

輸出結(jié)果：

Name: Naomi
Address: 1600 Amphitheatre

說(shuō)明： templateUrl 的值可以是一個(gè)函數(shù)返回值，返回用于指令中的html模板的url。

隔離指令的作用域

① 通過(guò)不同的controller

html結(jié)構(gòu)：

<div ng-app="myApp">
  <div ng-controller="myCtrl1">
    <my-customer></my-customer>
  </div>
  <div ng-controller="myCtrl2">
    <my-customer></my-customer>
  </div>
</div>

javascript結(jié)構(gòu)：

angular.module('myApp', [])
  .controller('myCtrl1', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
   };
  }])
  .controller('myCtrl2', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Igor',
    address: '123 Somewhere'
   };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
   };
  });

templateUrl html 結(jié)構(gòu)：

 Name: {{customer.name}} Address: {{customer.address}}

輸出結(jié)果：

 Name: Naomi Address: 1600 Amphitheatre
 Name: Igor Address: 123 Somewhere

說(shuō)明： 可見(jiàn) 不同的controller 有不同的作用范圍。雖然指令一樣，每次渲染都是分離的，所以我們可以抽象出來(lái)指令，用于html模板和代碼的重用,封裝。但是這樣又不是很好，因?yàn)橛昧藘蓚€(gè)controller，我們可以使用指令中的scope而不是controller里的scope來(lái)替代，具體做法是將外部的scope 映射到指令內(nèi)部的scope, 如下：

② 通過(guò)指令屬性映射scope

html結(jié)構(gòu)：

<div ng-app="myApp" ng-controller="myCtrl">
 <my-customer info="naomi"></my-customer>
 <my-customer info="igor"></my-customer>
</div>

javascript 結(jié)構(gòu)：

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
   $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    scope: {
     customerInfo: '=info'
    },
    templateUrl: 'my-customer-iso.html'
   };
  });

templateUrl html結(jié)構(gòu)：

Name: {{customerInfo.name}} Address: {{customerInfo.address}}

編譯后的html結(jié)果：

 Name: Naomi Address: 1600 Amphitheatre
 Name: Igor Address: 123 Somewhere

③ 指令中的如果定義scope屬性則html中的scope不會(huì)直接繼承controller中的scope，在html中使用的都需要在scope:{}中聲明，否則就是undefined

html 結(jié)構(gòu)：

 <div ng-app="myApp" ng-controller="myCtrl">
   <my-customer info="naomi"></my-customer>
 </div>

javascript結(jié)構(gòu)：

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
   $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    scope: {
     customerInfo: '=info'
    },
    templateUrl: 'my-customer-plus-vojta.html'
   };
  });

  templateUrl html結(jié)構(gòu)：

Name: {{customerInfo.name}} Address: {{customerInfo.address}}
<br>
Name: {{vojta.name}} Address: {{vojta.address}}

html編譯后的結(jié)果：

Name: Naomi Address: 1600 Amphitheatre
Name: Address:

說(shuō)明： vojta 在指令中的scope沒(méi)有被定義，不會(huì)直接繼承在controller中的，那么他就是undefined，所以就是空白(什么都不顯示)

可操作DOM的指令

創(chuàng)建一個(gè)用于操作dom的指令，如果需要dom操作也都應(yīng)該放在指令里。

html 結(jié)構(gòu)：

 <div ng-app="myApp" ng-controller="myCtrl">
  Date format: <input ng-model="format"> <hr/>
  Current time is: <span my-current-time="format"></span>
 </div>

javascript結(jié)構(gòu)：

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.format = 'M/d/yy h:mm:ss a';
  }])
  .directive('myCurrentTime', function($interval, dateFilter) {
    return {
     restrict: 'AE',
     link: function(scope, element, attr){
       var format, timeoutId;

      /* 更新時(shí)間函數(shù) */
      function updateTime() {
       element.text(dateFilter(new Date(), format));
      }

      /* 監(jiān)視時(shí)間格式的改變 */
      var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) {
       format = value;
       updateTime();
      });

      /* 定時(shí)器 */
      timeoutId = $interval(function() {
       updateTime(); // update DOM
      }, 1000);

      /* 頁(yè)面跳轉(zhuǎn)后移除定時(shí)器防止內(nèi)存泄露 */
      element.on('$destroy', function() {
       $interval.cancel(timeoutId);
       attrWatch(); // 移除watch
      });
    }
   };
  });

說(shuō)明： 在link函數(shù)中，操作dom節(jié)點(diǎn)，讓dom的文本節(jié)點(diǎn)動(dòng)態(tài)顯示時(shí)間跳動(dòng)。在頁(yè)面跳轉(zhuǎn)之后及時(shí)清除定時(shí)器和監(jiān)視器以免發(fā)生內(nèi)存泄漏。

通過(guò)transclude和ng-transclude創(chuàng)建可包裹其他元素的指令

html結(jié)構(gòu)：

 <div ng-app="myApp" ng-controller="myCtrl">
   <my-dialog>Check out the contents, {{name}}!</my-dialog>
 </div>

javascript結(jié)構(gòu)：

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.name = 'Tobias';
  }])
  .directive('myDialog', function() {
   return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
 };
});

templateUrl html 結(jié)構(gòu)：

 <div class="alert" ng-transclude></div>

編譯后的html結(jié)構(gòu)：

Check out the contents, Tobias!

說(shuō)明： 指令中的scope本應(yīng)隔離controller中的作用域的，但是由于設(shè)置了transclude=true選項(xiàng)，scope就會(huì)繼承controller中的定義，所以最終是Tobias而不是Jeff。

關(guān)于“angular中自定義指令的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。