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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
document.getElementById介绍
Sep 13 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
BootStrap中的表单大全
Sep 07 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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编写大型网站问题集
2007/03/06 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
JavaScript插件化开发教程(六)
2015/02/01 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
javascript编写简易计算器
2017/05/06 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python之Character string(实例讲解)
2017/09/25 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python探索之修改Python搜索路径
2017/10/25 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
好习惯伴我成长演讲稿
2014/05/21 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
Vue如何清空对象
2022/03/03 Vue.js