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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
jquery实现数字输入框
2017/02/22 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
bootstrap轮播图示例代码分享
2017/05/17 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
Python 学习笔记
2008/12/27 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python中如何打包用户自定义模块
2020/09/23 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
违反学校规定检讨书
2014/01/18 职场文书
高中军训感想300字
2014/03/04 职场文书
幼儿园秋游感想
2014/03/12 职场文书
中式结婚主持词
2014/03/14 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
2016年记者节感言
2015/12/08 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书