angularjs指令之绑定策略(@、=、&)


Posted in Javascript onApril 13, 2017

引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新。那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略。

1:先说指令域scope的@

我觉得描述很费劲,直接用代码来阐述:

AngularJS.html

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 <input type="text" ng-model="t" /> 
  <kid title="{{t}}" > //这个必须指定的,这里的title是指令里scope的@对应的,t就是控制域scope下的 
  <span>我的angularjs</span> 
 </kid> 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore="motorola"; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   title:"@" 
  }, 
  template:'<div >{{title}}</div>' 
   
 } 
});

在输入框输入数字会绑定到指令模板的title中。

2:再说说Scope的=

angularjs.html

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 <input type="text" ng-model="t" /> 
  <kid title="t" > //和上面相比,这个直接赋值等于scope域下的t了 
  <p>{{title}}</p> 
  <span>我的angularjs</span> 
 </kid> 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js代码如下:

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore="motorola"; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   title:"=" 
  }, 
  template:'<div >{{title}}</div>' 
   
 } 
});

3:最后说&,这个是用来方法调用的

angularjs.html代码如下:

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
  <kid flavor="logchore()" ></kid> //先比=,函数赋值的形式,而logchore函数必须是域scope下声明的函数 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js代码如下:

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore=function(){ 
  alert('ok'); 
 }; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   flavor:"&" 
  }, 
  template:'<div ><button ng-click="flavor()"></button></div>' 
   
 } 
});

如果logchore带有参数,

angularjs.html代码如下:

<!doctype html> 
<html ng-app='myApp'> 
 <head>  
 
 </head> 
 <body>  
 
 <div ng-controller="listCtrl">  
 
  <kid flavor="logchore(t)" ></kid> 
 
</div> 
<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="main05.js"></script> 
</body></html>

main05.js代码如下:

var myApp=angular.module('myApp',[]); 
myApp.controller('listCtrl',function($scope){ 
 $scope.logchore=function(x){ 
  alert(x); 
 }; 
}); 
 
 
myApp.directive('kid',function(){ 
 return { 
  'restrict':'E', 
  scope:{ 
   flavor:"&" 
  }, 
  template:'<div > <input type="text" ng-model="v" /> <button ng-click="flavor({t:v})"></button></div>' 
   
 } 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 #Javascript
详解angularJs指令的3种绑定策略
Apr 13 #Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 #Javascript
Vue组件tree实现树形菜单
Apr 13 #Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 #Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python单例设计模式实现解析
2020/01/07 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
《路旁的橡树》教学反思
2014/04/07 职场文书
企业管理标语
2014/06/10 职场文书
财务工作失职检讨书
2014/11/21 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
初中教师个人总结
2015/02/10 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
关于 Python json中load和loads区别
2021/11/07 Python
sql server 累计求和实现代码
2022/02/28 SQL Server
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
Java数组详细介绍及相关工具类
2022/04/14 Java/Android