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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
PHP概率计算函数汇总
2015/09/13 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
PHP中的self关键字详解
2019/06/23 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python selenium 弹出框处理的实现
2019/02/26 Python
浅谈python中get pass用法
2019/03/19 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
银行类自荐信
2014/02/04 职场文书
服务承诺书范文
2014/05/19 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python