前言
我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去。
一、首先回顾一下有哪些绑定策略?
看这个实在是有点抽象了,我们来看具体的实例分析吧!
二、简单的Demo实例
@绑定:传递一个字符串作为属性的值。
比如 str : ‘@string'
控制器中代码部分示例:
$scope.sayHello=function(name){
alert("Hello "+name);
};
}]);
myDirec.directive("drink",function(){
return{
restrict:'AE',scope:{
flavor:'@' //自动绑定,传递的是字符串
},template:"
});
分析我们在drink指令中为什么能取得在父作用域中的值呢?原因就在于我们使用了@绑定策略,可以将ctrlFlavor赋值给flavor,这样在模板中就能取到该值了。
=绑定:指定获取属性的类型为父作用域的属性
页面:
执行的流程是这样的:
① 指令被编译的时候会扫描到template中的模型发现有一个flavor,
② 查找scope中是否定义:通过=与父作用域绑定,方式是传递父作用域中的属性ctrlFlavor;
③ flavor与父作用域中的ctrlFlavor属性绑定,找到它的值“鸡尾酒”;
④ 将model的值显示在模板中。
&绑定:传递的是父作用域中的函数
控制器部分:
'+ '
页面部分:
从结果上看,三个输入框中的内容互不影响,因为都是新的独立作用域,能够完成从视图到模型的绑定。
三、Expander示例
首先看控制器代码:
myDirec.directive('expander',function() {
return {
restrict : 'EA',replace : true,transclude : true,scope : {
title : '=expanderTitle'
},template : '
- '<div class="title" ng-click="toggle()">{{title}}
scope.showMe = false;
scope.toggle = function() {
scope.showMe = !scope.showMe;
};
}
};
});