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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
json数据的列循环示例
Sep 06 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 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 防止表单重复提交的方法
2011/08/08 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
对python中Json与object转化的方法详解
2018/12/31 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python 列表的清空方式
2020/01/13 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
新手入门Mysql--概念
2021/06/18 MySQL