angularjs指令之绑定策略（@、=、&）
更新时间：2017年04月13日 14:20:36 作者：ikscher
这篇文章主要介绍了angularjs指令之绑定策略（@、=、&）,AngularJS提供了几种方法能够将指令内部的隔离作用域，同指令外部的作用域进行数据绑定。
引入主题背景：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>'
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
angular内置provider之$compileProvider详解
下面小编就为大家带来一篇angular内置provider之$compileProvider详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了AngularJS动态加载模块和依赖的方法,结合实例形式分析了AngularJS使用ocLazyLoad实现动态加载的相关操作技巧,需要的朋友可以参考下2016-11-11
使用typescript开发angular模块并发布npm包
本篇文章主要介绍了使用typescript开发angular模块并发布npm包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了Angular ElementRef简介及其使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
angularJs使用ng-repeat遍历后选中某一个的方法
今天小编就为大家分享一篇angularJs使用ng-repeat遍历后选中某一个的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了详解Angular 4.x 动态创建组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
AngularJS是一款客户端MVC的javascript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构)，如果你有Struts或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的，本文给大家介绍AngularJS+HTML+Groovy实现登录功能2016-02-02
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
本篇文章主要介绍了详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例 ，有需要的小伙伴可以参考下。2017-02-02
这篇文章主要介绍了jquery操作angularjs对象的相关资料,需要的朋友可以参考下2015-06-06
本文通过实例给大家介绍了angular排序的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-06-06
最新评论