49.AngularJs 指令directive之controller，link，compile

時間  2019-11-10
標籤 49.angularjs angularjs 指令 directive controller link compile 欄目 AngularJS 简体版
原文   原文鏈接

轉自：https://www.cnblogs.com/best/tag/Angular/html

關於自定義指令的命名，你能夠隨便怎麼起名字都行，官方是推薦用[命名空間-指令名稱]這樣的方式，像ng-controller。不過你可千萬不要用 ng-前綴了，防止與系統自帶的指令重名。另一個需知道的地方，指令命名時用駝峯規則，使用時用-分割各單詞。如：定義myDirective，使用時 像這樣：<my-directive>。app

這裏列出directive的合法命名：dom

  • ng:bind
  • ng-bind
  • ng_bind
  • x-ng-bind
  • data-ng-bind
我是教師，在新建試題輸入分數的時候應該只能輸入數字纔對，輸入其餘內容是不合法的，並且我但願這個分數是1~10之間的數字。可否只在輸入框上加一個屬性.咱們定義一個叫作fractionNum的指令以下
Java代碼   收藏代碼
  1. app.directive('fractionNum',function(){  
  2.     return {  
  3.         link : function(scope, elements, attrs, controller){  
  4.             elements[0].onkeyup = function(){  
  5.                 if(isNaN(this.value) || this.value<1 || this.value>10){  
  6.                     this.style.borderColor = 'red';  
  7.                 }  
  8.                 else{  
  9.                     this.style.borderColor = '';  
  10.                 }  
  11.             };  
  12.         }  
  13.     };  
  14. });  
link的值是一個函數，用來定義指令的行爲。從傳入的參數中能夠獲取到當前元素，咱們即可以拿當前元素開刀了。我在此處監聽當前元素的keyup事件，獲取元素的值，若是不是1~10之間的數字，則把輸入框的邊框顏色變爲紅色。這下這個指令就能夠工做了。定義好的指令就能夠在模板中使用了，使用方法以下：
Java代碼   收藏代碼
  1. 分數:<input type="text" ng-model="question.fraction" fraction-num /><br />  
 
 
controller，link，compile有什麼不一樣
Java代碼   收藏代碼
  1. //directives.js增長exampleDirective  
  2. phonecatDirectives.directive('exampleDirective', function() {  
  3.     return {  
  4.         restrict: 'E',  
  5.         template: '<p>Hello {{number}}!</p>',  
  6.         controller: function($scope, $element){  
  7.             $scope.number = $scope.number + "22222 ";  
  8.         },  
  9.         //controllerAs:'myController',  
  10.         link: function(scope, el, attr) {  
  11.             scope.number = scope.number + "33333 ";  
  12.         },  
  13.         compile: function(element, attributes) {  
  14.             return {  
  15.                 pre: function preLink(scope, element, attributes) {  
  16.                     scope.number = scope.number + "44444 ";  
  17.                 },  
  18.                 post: function postLink(scope, element, attributes) {  
  19.                     scope.number = scope.number + "55555 ";  
  20.                 }  
  21.             };  
  22.         }  
  23.     }  
  24. });  
  25.   
  26. //controller.js添加  
  27. dtControllers.controller('directive2',['$scope',  
  28.     function($scope) {  
  29.         $scope.number = '1111 ';  
  30.     }  
  31. ]);  
  32.   
  33. //html  
  34. <body ng-app="phonecatApp">  
  35.     <div ng-controller="directive2">  
  36.         <example-directive></example-directive>  
  37.     </div>  
  38. </body>  
 運行結果：
Java代碼   收藏代碼
  1. Hello 1111 22222 44444 55555 !    
  由結果能夠看出來，controller先運行，compile後運行，link不運行(link就是compile中的postLink)。將上例中的compile註釋掉運行結果：
Java代碼   收藏代碼
  1. Hello 1111 22222 33333 !    
  由結果能夠看出來，controller先運行，link後運行，link和compile不兼容。compile改變dom,link事件的觸發和綁定
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程