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>'
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
大家都是在Reactive Extensions for Javascript诞生于几年前，随着angular2正式版的发布，它将会被更多开发者所认知。这篇文章我们来详细介绍RxJs提供的Observable对象，有需要的朋友们可以参考借鉴。2016-09-09
这篇文章主要介绍了使用Raygun来自动追踪AngularJS中的异常,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下2015-06-06
Angular依赖注入optional constructor parameters概念
这篇文章主要为大家介绍了Angular 依赖注入领域里 optional constructor parameters 的概念及使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
本文给大家带来一段简短代码实现angularjs弹性布局效果，非常实用，对angularjs弹出布局知识感兴趣的朋友可以参考下2016-08-08
图片轮播在我们日常开发中是再熟悉不过的了，下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-05-05
结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor，下面这篇文章主要给大家介绍了关于Angular 2.x结构指令的相关资料，需要的朋友可以参考下。2017-05-05
微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决
本文主要介绍微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决，这里提供了详细的操作方式，有需要的小伙伴可以参考下2016-09-09
这篇文章主要介绍了Angular实现svg和png图片下载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
AngularJS实践之使用ng-repeat中$index的注意点
最近通过客户的投诉主要到在ng-repeat中使用了$index引发的一个bug，下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
swiper在angularjs中使用循环轮播失效的解决方法
今天小编就为大家分享一篇swiper在angularjs中使用循环轮播失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论