Angular.JS中的指令引用template與指令當做屬性詳解

更新時間：2017年03月30日 11:30:03 作者：多客博圖

這篇文章主要介紹了Angular.JS中的指令引用template與指令當做屬性的相關資料，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。

一、引用template

對于指令，可以把它簡單的理解成在特定DOM元素上運行的函數(shù)，指令可以擴展這個元素的功能。

指令要生效，那么html頭里面要

<html lang="en" ng-app="app">

制定ng-app的值和定義指令的module名字一致：

angular.module('app',[])

指令的完整參數(shù)：

angular.module('myApp', [])
.directive('myDirective', function() {
 return {
 restrict: String,
 priority: Number,
 terminal: Boolean,
 template: String or Template Function:
 function(tElement, tAttrs) {...},
 templateUrl: String,
 replace: Boolean or String,
 scope: Boolean or Object,
 transclude: Boolean,
 controller: String or
 function(scope, element, attrs, transclude, otherInjectables) { ... },
 controllerAs: String,
 require: String,
 link: function(scope, iElement, iAttrs) { ... },
 compile: // 返回一個對象或連接函數(shù)，如下所示： function(tElement, tAttrs, transclude) {
 return {
 pre: function(scope, iElement, iAttrs, controller) { ... },
 post: function(scope, iElement, iAttrs, controller) { ... }
 }
 return function postLink(...) { ... }
 }
 };
 });

指令可以使用的方式：

restrict[string]

restrict是一個可選的參數(shù)。用于指定該指令在DOM中以何種形式被聲明。默認值是A，即以屬性的形式來進行聲明。

可選值如下：

E（元素）<my-directive></my-directive>
A（屬性，默認值）<div my-directive="expression"></div>
C（類名）<div class="my-directive:expression;"></div>
M（注釋）<--directive:my-directive expression-->

replace[bool]

replace是一個可選參數(shù)，如果設置了這個參數(shù)，值必須為true，因為默認值為false。默認值意味著模板會被當作子元素插入到調用此指令的元素內部,

例如上面的示例默認值情況下，生成的html代碼如下：

<my-directive value="http://www.baidu.com" text="百度"><a  rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度</a></my-directive>

如果設置replace=true

<a  rel="external nofollow" rel="external nofollow" rel="external nofollow" value="http://www.baidu.com" text="百度">百度</a>

據(jù)我觀察，這種效果只有設置restrict="E"的情況下，才會表現(xiàn)出實際效果。

template[string or function]

template參數(shù)是可選的，必須被設置為以下兩種形式之一：

一段HTML文本；

一個可以接受兩個參數(shù)的函數(shù)，參數(shù)為tElement和tAttrs，并返回一個代表模板的字符串。tElement和tAttrs中的t代表template，是相對于instance的。

不管是返回html文本還是函數(shù)，都是最后替換一個html，和replace屬性搭配使用的，先給出一個完整的index.heml directive.js，以這個為例子來說明：

<!doctype html>
<html lang="en" ng-app="app">

<head>
 <meta charset="utf-8">
 <title>My HTML File</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <script src="angularjs/angular.js"></script>
 <script src="mydirective.js"></script>
</head>

<body>
 <my-directive></my-directive>
</body>

</html>

然后js：

 angular.module('app',[])
 .directive('myDirective', function () {
 return {
 restrict: 'E',
 template: '<a  rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度</a>'
 };
 })

最后的運行效果以及firebug查看到的效果：

如果添加指令的replace屬性為ture，那么就不會有這個directvie指令部分了：

上面就是差別。

再說說指令定義里面模板參數(shù)是函數(shù)的情況，我們改寫html以及js：

<!doctype html>
<html lang="en" ng-app="app">

<head>
 <meta charset="utf-8">
 <title>My HTML File</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <script src="angularjs/angular.js"></script>
 <script src="mydirective.js"></script>
</head>

<body>
 <my-directive value="http://www.baidu.com" text="百度"></my-directive>
</body>

</html>

js文件：
angular.module('app',[])
 .directive('myDirective', function () {
 return {
 restrict: 'EAC',
 template: function (elem, attr) {
  return "<a href='" + attr.value + "'>" + attr.text + "</a>";
 }
 };
 })

指令定義的template是一個函數(shù)對象，返回一個html的字符串，那么他的elem和attr就是分別代表這個指令和他在index.html里面的屬性：

attr.value和attr.text分別對應：

<my-directive value="http://www.baidu.com" text="百度"></my-directive>

里面的value和text。

不replace的情況：

二、指令當做屬性

上面說過：

angular.module('myApp', []) 
 .directive('myDirective', function() { 
 return { 
 restrict: String, 后面省略

指令restrict有四種用法，默認是A，也就是當做屬性，

E（元素）<my-directive></my-directive>
A（屬性，默認值）<div my-directive="expression"></div>
C（類名）<div class="my-directive:expression;"></div>
M（注釋）<--directive:my-directive expression-->

然后如果一個指令直接返回一個函數(shù)的時候，其實返回的一個link函數(shù)，比如：

angular.module('time', [])
 .directive('xxx', function() {
 return function(scope, element, attrs) {

這個是表示直接link。

當指令做屬性的時候，有兩重含義：

1.在一個html元素里面制定為屬性

2.js定義的指令名。

看一個例子：

JS：

angular.module('time', [])
 .controller("Ctrl2", function($scope) {
 $scope.format = 'M/d/yy h:mm:ss a';
 })
 // Register the 'myCurrentTime' directive factory method.
 // We inject $timeout and dateFilter service since the factory method is DI.
 .directive('myCurrentTime', function($timeout, dateFilter) {
 // return the directive link function. (compile function not needed)
 return function(scope, element, attrs) {
  var format, // date format
  timeoutId; // timeoutId, so that we can cancel the time updates

  // used to update the UI
  function updateTime() {
  element.text(dateFilter(new Date(), format));
  }

  // watch the expression, and update the UI on change.
  scope.$watch(attrs.myCurrentTime, function(value) {
  format = value;
  updateTime();
  });

  // schedule update in one second
  function updateLater() {
  // save the timeoutId for canceling
  timeoutId = $timeout(function() {
   updateTime(); // update DOM
   updateLater(); // schedule another update
  }, 1000);
  }

  // listen on DOM destroy (removal) event, and cancel the next UI update
  // to prevent updating time ofter the DOM element was removed.
  element.bind('$destroy', function() {
  $timeout.cancel(timeoutId);
  });

  updateLater(); // kick off the UI update process.
 }
 });

然后index.html:

<!doctype html>
<html lang="en" ng-app="time">

<head>
 <meta charset="utf-8">
 <title>My HTML File</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <script src="angularjs/angular.js"></script>
 <script src="mydirective.js"></script>
</head>

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

</html>

注意：ng-app="time"一定要指明是time。否則無法關聯(lián)起來。

分析如下：

給span制定了一個屬性，綁定到了scope里面的format
<span my-current-time="format"></span>
定義了輸入框，綁定了scope里面的format
<input ng-model="format">
定義了controller -- Ctrl2，然后引入了scope，定義了變量format
定義了指令myCurrentTime ，然后就是和html里面的my-current-time="format"對應，html里面用破折號連起來，指令就是駝峰樣子的myCurrentTime（首字母小寫）

link函數(shù)的三個參數(shù)，以及attrs的使用：

return function(scope, element, attrs) {
scope.$watch(attrs.myCurrentTime, function(value) {

可看到，myCurrentTime既是指令名字，然后在這個span元素里面又是屬性名，他的值是format的真實值。
用firebug看到：
指令當成屬性，不會有replace起作用的時候，不會被替換也不會插入，就是一個屬性，后面的日期值，其實是updateTime()函數(shù)直接寫elem.text的效果。
此處指令當做屬性的作用就是擴展當前元素的功能。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法
這篇文章主要介紹了AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法,結合實例形式分析AngularJS下拉滾動插件ngInfiniteScroll的下載、功能、屬性及相關使用方法,需要的朋友可以參考下
2016-12-12
angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法，需要的的朋友參考下
2017-01-01
淺談angular2子組件的事件傳遞(任意組件事件傳遞)
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Angularjs使用指令做表單校驗的方法
本篇文章主要介紹了Angularjs使用指令做表單校驗的方法，詳細的介紹了用指令做校驗的方法，具有一定的參考價值，有興趣的可以了解一下。
2017-03-03
angularjs學習筆記之三大模塊（modal，controller，view）
本文給大家記錄的是angularjs的三大模塊（modal，controller，view）的使用說明，方便初學者能夠順利的學習angularjs.
2015-09-09
angularjs下拉框空白的解決辦法
這篇文章主要為大家詳細介紹了angularjs下拉框空白的解決方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的，當使用ng-template定義好一個模板之后，可以用ng-container和templateOutlet指令來進行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧
2018-08-08
AngularJS的Filter的示例詳解
本文通過示例給大家詳解angularjs 的filter知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-03-03
angular.js實現(xiàn)購物車功能
這篇文章主要為大家詳細介紹了angular.js購物車功能的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
AngularJS2 與 D3.js集成實現(xiàn)自定義可視化的方法
本篇文章主要介紹了ANGULAR2 與 D3.js集成實現(xiàn)自定義可視化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12