Angular.js指令学习中一些重要属性的用法教程


Posted in Javascript onMay 24, 2017

Angular指令

定义一个指令的方法非常简单,只需要调用`directive`方法即可:

var app=angular.module('myapp',[]);
 app.directive(name,fn)

1. 基础指令

var app=angular.module('myapp',[]);
 app.run(function($templateCache){
  $templateCache.put('cache','<h3>模板内容来源于缓存</h3>')
 });
 app.directive('tsHello',function(){
  return{
  restrict:'EAC',
  template:'<h3>Hello,directive</h3>'
  }
 })
 app.directive('tsTplfile',function(){
  return{
  restrict:'EAC',
  templateUrl:'/static/tpl.html'
  }
 });
 app.directive('tsTplscript',function(){
  return {
  restrict:'EAC',
  templateUrl:'tpl',
  replace:true
  }
 });
 //templateUrl属性值是添加的缓存名称,加速文件访问
 app.directive('tsTplcache',function(){
  return{
  restrict:'EAC',
  templateUrl:'cache'
  }
 })
 </script>

2. 重要指令

2.1 transclude

<script type="text/ng-template" id='tpl'>
 <div>
  <input type="text" ng-model='text' />
  <div ng-transclude></div>
 </div>
 </script>
 <ts-tplscript>{{text}}</ts-tplscript>
 <script type="text/javascript">
 var app=angular.module('myapp',[]);
 app.directive('tsTplscript',function(){
  return {
  restrict:'EAC',
  templateUrl:'tpl',
  transclude:true
  }
 });
 </script>

关于transclude更加详细的介绍,参见另外一篇文章

2.2 link

link属性的值是一个函数,在该函数中可以操控DOM元素的对象,包括绑定元素的各类事件,定义事件触发时执行的内容等:

link:function(scope,iEle,iAttrs)

link 函数包括3个主要的参数,其中,scope参数表示指令所在的作用域,它的功能与页面中控制器注入的作用域是相同的,iEle参数表示指令中的元素,该元素可以通过Angular内部封装的jqLite进行调用,jqLite相当于是一个压缩版的jQuery,包含了主要的元素操作API,在语法上与jQuery类似,iAttrs参数表示指令元素的属性集合,通过这个参数可以获取元素中的各类属性。

<script type="text/ng-template" id='tpl'>
 <button>单击按钮</button>
 </script>
 <div>
 <ts-tplscript></ts-tplscript>
 <div>{{content}}</div>
 </div>
 <script type="text/javascript">
 var app=angular.module('myapp',[]);
 app.directive('tsTplscript',function(){
  return {
  restrict:'EAC',
  templateUrl:'tpl',
  replace:true,
  link:function(scope,iEle,iAttrs){
   iEle.bind('click',function(){
   scope.$apply(function(){
    scope.content='这是点击后的内容';
   })
   iAttrs.$$element[0].disabled=true;//这里也可以替换为this.disabled=true;
   });
  }
  }
 });
 </script>

自定义tsTplscript指令时,在指令返回的对象中添加了link属性,用于绑定和执行DOM元素的各类事件,在属性值执行的函数中,添加scope,iEle,iAttrs三个参数,在指令执行的过程中,由于指令中并没有定义scope属性,因此,scope参数默认就是元素外层父级scope属性,即控制器注入的$scope属性。

此外,iEle参数就是被指令模板替换后的<button>元素,由于在Angular中引入了jqLite,因此可以直接调用bind方法绑定元素的各类事件,在执行事件函数的时候,调用了scope属性的$apply方法,它的功能是在执行完方法中的函数之后,重新渲染页面视图。

iAttrs参数是指令元素的属性集合,$$element则表示与属性对应的元素集合,该集合是一个数组。

2.3 compile

<div ng-controller='myController'>
 <ts-a>
  <ts-b>
  {{tip}}
  </ts-b>
 </ts-a>
 </div>
 <script type="text/javascript">
 var app=angular.module('myapp',[]);
 app.controller('myController',function($scope){
  $scope.tip='跟踪compile执行过程 ';
 });
 app.directive('tsA',function(){
  return {
  restrict:'EAC',
  compile:function(tEle,tAttrs,trans){
   console.log('正在编译A指令');
   //返回一个对象时,对象中包含两个名为`pre`和`post`的方法函数
   return {
   pre:function(scope,iEle,iAttrs){
    console.log('正在执行A中的pre函数');
   },
   post:function(scope,iEle,iAttrs){
    console.log('正在执行A中的post函数');
   }
   }
  }
  }
 });
 app.directive('tsB',function(){
  return {
  compile:function(tEle,tAttrs,trans){
   console.log('正在编译B指令');
   return{
   pre:function(scope,iEle,iAttrs){
    console.log('正在执行B中的pre函数');
   },
   post:function(scope,iEle,iAttrs){
    console.log('正在执行B中的post函数');
   }
   }
  }
  }
 })
 </script>

控制台依次输出:

正在编译A指令
 正在编译B指令
 正在执行A中的pre函数
 正在执行B中的pre函数
 正在执行B中的post函数
 正在执行A中的post函数

2.4 scope

2.4.1 当scope值是布尔类型

scope属性自定义指令时,默认值就是布尔类型的,初始值为false,在这种情况下,指令中的作用域就是指令元素所在的作用域,如果scope属性值为false,表示不创建新的作用域,直接继承父级作用域,二者数据完全相同,一方有变化,另外一方面将会自动变化。

如果scope属性值为true,表示子作用域是独立创建的,当它的内容发生变化时,并不会修改父作用域中的内容,不仅如此,一旦某个属性被子作用域进行了重置,那么,即使父作用域中的内容变化了,子作用域对应的内容也不会随之变化。

<script type="text/ng-template" id='tpl'>
 <div>{{message}}</div>
 <button ng-transclude></button>
 </script>
 <div>
 <input type="text" ng-model='message' />
 <ts-message>固定</ts-message>
 </div>
 <script type="text/javascript">
 var app=angular.module('myapp',[]);
 app.directive('tsMessage',function(){
  return {
  restrict:'EAC',
  templateUrl:'tpl',
  transclude:true,
  scope:true,
  link:function(scope,iEle,iAttrs){
   iEle.bind('click',function(){
   scope.$apply(function(){
    scope.message='这是单击按钮后的值。'
   })
   })
  }
  }
 });

 </script>

在单击按钮之前,子作用域中的值随父作用域改变,当单击按钮之后,手动重置了子作用域中的'message'遍历,但与变量绑定的父作用域的内容并没有变化,并且子作用域也不再随父作用域发生变化。

2.4.2 当scope值是对象

如果将scope属性值设置成一个JSON对象,那么父作用域与子作用域完全独立,不存在任何关联。

当指令中的scope属性值是JSON对象时,如果子作用域需要添加属性,必须先添加指令中的link函数,然后通过函数中的scope对象进行添加,如果在子作用域中,要绑定或调用父父作用域中的属性和方法,则需要在scope属性对应的JSON对象值中添加绑定策略。

严格来说,在JSON对象中添加的有3种绑定策略:@ = &

1、@

@绑定与将scope值设为true,有许多相同的地方,唯一不同之处在于,@绑定在子作用域充值属性之后,再返回修改父作用域对应属性内容时,子作用域对应的属性,同样还是会随之发生变化,而使用scope:true,则不会发生这一步。

2、=

=绑定的功能是创建一个父与子作用域可以同时共享的属性,即当父作用域修改了该属性,子作用域也随之变化,反之亦然,两个作用域间完全共享和同步。

3、&

&绑定的功能是可以在独立的子作用域中直接调用父作用域的方法,在调用时可以向函数传递参数,这种功能的好处在于,避免重复编写功能相同的代码,只需要进行简单的绑定设置,就可以使指令执行后,轻松调用控制器中的方法。

<script type="text/ng-template" id='tpl'>
 <div>
  <span>姓名:{{textName}}</span>
  <span>年龄:{{textAge}}</span>
 </div>
 <button ng-transclude></button>
 </script>
 <div ng-controller="myController">
 姓名:<input type="text" ng-model='text_name' /><br>
 年龄:<input type="text" ng-model='text_age' /><br>
 <div>{{tip}}</div>
 <ts-json a-attr="{{text_name}}" b-attr="text_age" reset="reSet()">重置</ts-json>
 </div>
 <script type="text/javascript">
 var app=angular.module('myapp',[]);
 app.controller('myController',function($scope){
  $scope.reSet=function(){
  $scope.tip='姓名与年龄重置成功!';
  }
 });
 app.directive('tsJson',function(){
  return {
  restrict:'EAC',
  templateUrl:'tpl',
  transclude:true,
  scope:{
   textName:'@aAttr',
   textAge:'=bAttr',
   reSet:'&reset'
  },
  link:function(scope,iEle,iAttrs){
   iEle.bind('click',function(){
   scope.$apply(function(){
    scope.reSet();
    scope.textName='张三';
    scope.textAge='20';
   })
   })
  }
  }
 });

 </script>

绑定的过程:

先在指令元素中创建a-attr或b-attr属性,由于HTML不区分大小写,因此使用-隔开。

需要注意的是:由于在指令中绑定策略不同,在指令元素中,属性绑定属性值也会有些变化,使用@绑定的属性,绑定属性值的方式为双大括号{{}},而使用=绑定的属性,绑定属性值的方式为等于号=,不需要双大括号.

2.5 require和controller

当一个子元素需要与一个父元素指令通信时,就需要添加并使用这两个属性值。

<div>
 <ts-parent>
  <div>{{ptip}}</div> 
  <ts-child>
  <div>{{ctip}}</div>
  </ts-child>
  <button ng-click='click()'>换位</button>
 </ts-parent>
 </div>
 <script type="text/javascript">
 var app=angular.module('myapp',[]);
 app.directive('tsParent',function(){
  return {
  restrict:'EAC',
  controller:function($scope,$compile,$http){
   this.addChild=function(c){
   $scope.ptip='今天天气不错!';
   $scope.click=function(){
    $scope.tmp=$scope.ptip;
    $scope.ptip=c.ctip;
    c.ctip=$scope.tmp;
   }
   }
  }
  }
 });
 app.directive('tsChild',function(){
  return {
  restrict:'EAC',
  require:'^?tsParent',
  link:function(scope,iEle,iAttrs,ctrl){
   scope.ctip='气温正好18摄氏度';
   ctrl.addChild(scope);
  }
  }
 })
 </script>

总结

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

Javascript 相关文章推荐
JavaScript控制Session操作方法
Jan 17 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
jquery append与appendTo方法比较
May 24 #jQuery
php 修改密码实现代码
May 24 #Javascript
详解VueJs前后端分离跨域问题
May 24 #Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 #Javascript
angular directive的简单使用总结
May 24 #Javascript
深入理解JavaScript 参数按值传递
May 24 #Javascript
详解Angular 4.x NgTemplateOutlet
May 24 #Javascript
You might like
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
Vue可自定义tab组件用法实例
2019/10/24 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
浅析使用Python操作文件
2017/07/31 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
python 元组和列表的区别
2020/12/30 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
企业安全生产承诺书
2014/05/22 职场文书
中国梦读书活动总结
2014/07/10 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
详解Redis主从复制实践
2021/05/19 Redis