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>'
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
深入解析AngularJS框架中$scope的作用与生命周期
$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中. $scope是一个把view(一个DOM元素)连结到controller上的对象.在
-
浅谈AngularJs指令之scope属性详解
AngularJS使用directive()方法类定义一个指令: .directive("name",function(){ return{ }; }) 上面是定义一个指令的主体框架,该方法接受两个参数: 1.第一个参数:name表示定义的指令的名称(angularjs会用这个name注册这个指令) 2.第二个参数:函数,该番薯必须返回一个对象或者一个函数,但通常我们会返回一个对象.return后接的就是返回的对象. 在返回的对象中有一个scope属性,这个属性用来修饰指令的作用域.
-
详解angularjs中的隔离作用域理解以及绑定策略
我们首先看下面的例子: <!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel
-
AngularJS指令中的绑定策略实例分析
本文实例讲述了AngularJS指令中的绑定策略.分享给大家供大家参考,具体如下: 在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略. 总体来说scope的绑定策略分为3种: (1)@ : 绑定字符串 (2)=: 与父控制器进行双向绑定 (3)&:用于调用父scope中的函数 1.基础方式 <test word="{{wordCtrl}}"></test> app.controller('myCon
-
Angularjs中三种数据的绑定策略(“@”，“=”，“&”)
前言 我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去. 一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值. 比如 str : '@string' 控制器中代码部分示例: myDirec.controller('MyCtrl3',['$scope',function($scope){ $scope.ctrlFlavor="鸡尾酒"; $scope.sayHello=
-
angularJS 中$scope方法使用指南
复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo
-
详解angularJs指令的3种绑定策略
今天,我来谈谈angularJs指令的3种绑定策略. 公司最近大量使用angularJs做单页面应用,就免不了使用angularJs的一些组件,而有的组件网上有现成的,不必操心,而有的就得自食其力,先前对指令这一块的封装一直理解的不够,故每次使用directive时抽象性都做得不好,往往移植性很差,而要将抽象做好,就不得不使用指令中的隔离作用域,而光有隔离作用域又不能做好前后文的通信问题,要解决通信的问题,就要使用指令中的绑定,正好最近要用,顺便就整理了一些关于指令中的3种绑定策略,并谈了一些自
-
AngularJs Scope详解及示例代码
一.什么是Scope? scope(http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope)是一个指向应用model的object.它也是expression(http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html)的执行上下文.scope被放置于一个类似应用的DOM结构的层次结构中.scope可以监测(watch,$watch)expression和传播事件.
-
AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ
-
AngularJS中scope的绑定策略实例分析
本文实例讲述了AngularJS中scope的绑定策略.分享给大家供大家参考,具体如下: 当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了: 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域. 现在,我们来看看绑定策略的三种形式: @.= .&. 1. @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定.指令内部作用域可以