標籤：學習 back javascrip meta get type ict title html
今天好大的雨啊！上一節中，我們的指令中的工廠函數中都是返回了一個叫做連結函數的工人函數，事實上我們的工廠函數也是可以返回一個對象，這個對象裡面可以包含很多的屬性，這使得我們可以建立更加強大的指令。
一、link屬性這個屬性的值是一個函數，叫做連結函數。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>link</title></head><body ng-controller="directiveCtrul"> <h1 get-data id="dff" class="haha"></h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module(‘myApp‘,[]) .controller(‘directiveCtrul‘,function($scope){ $scope.data = "你好啊！"; }) .directive("getData",function(){ return { link:function(scope,element,attrs){ console.log(scope[‘data‘]); } } }) </script></body></html>
有木有發現這跟上文中的第一個例子幾乎完全相同，只是將那個返回的函數放到了一個對象的link屬性中。
二、restrictrestrict屬性定義了我們的指令應該被怎樣使用。E表示作為一個元素，A表示用作一個屬性，C表示用作一個類，M表示用作一個注釋 。
directive("getData",function(){ return { link:function(scope,element,attrs){ console.log(scope[‘data‘]); }, restrict:"ECA" } })
<h1 get-data id="dff" class="haha"></h1><!-- 用作屬性A -->
<get-data></get-data><!-- 用作元素E -->
<h1 class="get-data"></h1><!-- 用作類C -->
假如用錯了會怎樣？如果你不是通過指令擷取資料的，那麼只是不工作而已;另外，如果你依賴了指令，那麼可能會引用錯誤。
三、 template，templateUrl都是用來指定一個模板的。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>link</title></head><body ng-controller="directiveCtrul"> <div get-data="data" id="dff" class="haha"></div><!-- 用作屬性A --> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module(‘myApp‘,[]) .controller(‘directiveCtrul‘,function($scope){ $scope.data = "你好啊！"; }) .directive("getData",function(){ return { link:function(scope,element,attrs){ scope.data = scope[attrs[‘getData‘]]; }, restrict:"A", template:"<h1>{{data}}</h1>" } }) </script></body></html>
還闊以用函數指定模板
directive("getData",function(){ return { link:function(scope,element,attrs){ scope.data = scope[attrs[‘getData‘]]; }, restrict:"A", template:function(){return "<h1>{{data}}</h1>"} } })
看看指定一個外部模板
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>link</title></head><body ng-controller="directiveCtrul"> <div get-data="data" id="dff" class="haha"></div><!-- 用作屬性A --> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script> <script type="text/javascript"> angular.module(‘myApp‘,[]) .controller(‘directiveCtrul‘,function($scope){ $scope.data = "你好啊！"; }) .directive("getData",function(){ return { link:function(scope,element,attrs){ scope.data = scope[attrs[‘getData‘]]; }, restrict:"A", templateUrl:‘h.html‘ } }) </script></body></html>
在我們的同級目錄中有個叫做h.html的檔案，裡面定義了我們的模板。這個外部模板實際上是發起了一次ajax請求，將請求的檔案添加到了指定位置。
四、replace
這個屬性決定了我們的運用指令的那個元素是否應該被替換掉。
舉個例子，上面的那個測試產生的和結構是這樣的
但我們將replace屬性置為true時，結構就是這樣的了
看到沒，那個div沒了。
本文到此結束，我決定將範圍的管理放到下一篇文章，因為我決定先休息一下。
AngularJS1.X學習筆記9-自訂指令（中）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
