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 相关文章推荐
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
jQuery实现滚动效果
Nov 17 jQuery
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
前端JavaScript大管家 package.json
Nov 02 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
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
php flv视频时间获取函数
2010/06/29 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
document.createElement()用法
2013/03/13 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
详解vue-router基本使用
2017/04/18 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
走群众路线剖析材料
2014/10/09 职场文书
python实现进度条的多种实现
2021/04/29 Python