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


Posted in Javascript onMarch 30, 2017

一、引用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://www.baidu.com" text="百度"><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度</a></my-directive>

如果设置replace=true

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

据我观察,这种效果只有设置restrict="E"的情况下,才会表现出实际效果。

template[string or function]

template参数是可选的,必须被设置为以下两种形式之一:

 一段HTML文本;

一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符串。tElement和tAttrs中的t代表template,是相对于instance的。

不管是返回html文本还是函数,都是最后替换一个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 href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度</a>'
 };
 })

最后的运行效果以及firebug查看到的效果:

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

如果添加指令的replace属性为ture,那么就不会有这个directvie指令部分了:

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

上面就是差别。

再说说指令定义里面模板参数是函数的情况,我们改写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是一个函数对象,返回一个html的字符串,那么他的elem和attr就是分别代表这个指令和他在index.html里面的属性:

attr.value和attr.text分别对应:

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

里面的value和text。

不replace的情况:

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

二、指令当做属性

上面说过:

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-->

然后如果一个指令直接返回一个函数的时候,其实返回的一个link函数,比如:

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。否则无法关联起来。

分析如下:

  • 给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看到:Angular.JS中的指令引用template与指令当做属性详解
  • 指令当成属性,不会有replace起作用的时候,不会被替换也不会插入,就是一个属性,后面的日期值,其实是updateTime()函数直接写elem.text的效果。
  • 此处指令当做属性的作用就是扩展当前元素的功能。

总结

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

Javascript 相关文章推荐
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Vue-component全局注册实例
Sep 06 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 #jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 #jQuery
借助node实战JSONP跨域实例
Mar 30 #Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 #Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 #Javascript
实例详解display:none与visible:hidden的区别
Mar 30 #Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 #Javascript
You might like
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Numpy掩码式数组详解
2018/04/17 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
会计专业自荐信
2013/12/02 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
辩论赛主持词
2014/03/18 职场文书
小学语文业务学习材料
2014/06/02 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
师德师风个人整改措施
2014/10/27 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
捐资助学感谢信
2015/01/21 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server