Angular.JS中的指令引用template与指令当做属性详解

时间：2021-05-28

一、引用template

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。

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

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

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

angular.module('app',[])

指令的完整参数：

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: // 返回一个对象或连接函数，如下所示： function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { ... }, post: function(scope, iElement, iAttrs, controller) { ... } } return function postLink(...) { ... } } }; });

指令可以使用的方式：

restrict[string]

restrict是一个可选的参数。用于指定该指令在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是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,

例如上面的示例默认值情况下，生成的html代码如下：

<my-directive value="http://pile 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。否则无法关联起来。

分析如下：

  • 给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函数的三个参数，以及attrs的使用： return function(scope, element, attrs) {scope.$watch(attrs.myCurrentTime, function(value) {
  • 可看到，myCurrentTime既是指令名字，然后在这个span元素里面又是属性名，他的值是format的真实值。
  • 用firebug看到：
  • 指令当成属性，不会有replace起作用的时候，不会被替换也不会插入，就是一个属性，后面的日期值，其实是updateTime()函数直接写elem.text的效果。
  • 此处指令当做属性的作用就是扩展当前元素的功能。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章