标签：src 获取 输入 help type and rest table highlight
看这个实在是有点抽象了，我们来看具体的实例分析吧！
@绑定：传递一个字符串作为属性的值。比如 str : ‘@string’
控制器中代码部分示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
myDirec.controller(‘MyCtrl3‘,[‘$scope‘,function($scope){ $scope.ctrlFlavor=鸡尾酒; $scope.sayHello=function(name){ alert(Hello +name); }; }]);myDirec.directive(drink,function(){ return{ restrict:‘AE‘, scope:{ flavor:‘@‘ //自动绑定，传递的是字符串 }, template: |
{{flavor}}
, }; });
页面中使用标签部分示例：
|
1
|
|
分析我们在drink指令中为什么能取得在父作用域中的值呢？原因就在于我们使用了@绑定策略，可以将ctrlFlavor赋值给flavor,这样在模板中就能取到该值了。
=绑定：指定获取属性的类型为父作用域的属性
|
1
2
3
4
5
6
7
8
9
|
myDirec.directive(drink2,function(){ return{ restrict:‘AE‘, scope:{ flavor:‘=‘ //自动绑定 }, template:‘<input ng-model="flavor/" type="text">‘ };}); |
页面：
|
1
|
|
执行的流程是这样的：
① 指令被编译的时候会扫描到template中的模型发现有一个flavor，
② 查找scope中是否定义：通过=与父作用域绑定，方式是传递父作用域中的属性ctrlFlavor；
③ flavor与父作用域中的ctrlFlavor属性绑定，找到它的值“鸡尾酒”；
④ 将model的值显示在模板中。
&绑定：传递的是父作用域中的函数
控制器部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
myDirec.directive(greeting, function() { return { restrict:‘AE‘, scope:{ greet:‘&‘ }, template:‘<input ng-model="userName" type="text">‘+ ‘<button ng-click="greet({name:userName})">问候一下</button>‘ };}); |
页面部分：
|
1
|
|
从结果上看，三个输入框中的内容互不影响，因为都是新的独立作用域，能够完成从视图到模型的绑定。
首先看控制器代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/*Expander示例*/myDirec.controller(‘SomeController‘,function($scope) { $scope.title = ‘点击展开‘; $scope.text = ‘这里是内部的显示的内容‘;});myDirec.directive(‘expander‘, function() { return { restrict : ‘EA‘, replace : true, transclude : true, scope : { title : ‘=expanderTitle‘ }, template : ‘ |
‘ + ‘
{{title}}
‘ + ‘
‘ + ‘
‘, link : function(scope, element, attrs) { scope.showMe = false;
scope.toggle = function() { scope.showMe = !scope.showMe; }; } }; });
再看页面部分：
|
1
|
|
{{text}}
执行的流程是这样的：
① 指令被编译的时候会扫描到template中的模型发现有一个{{title}}，
② 查找scope中是否定义：通过=与父作用域绑定，方式是传递父作用域中的属性;
我总是在这里犯糊涂，解释下这个“方式是传递父作用域中的属性”，这个在哪里用的呢？
|
1
|
|
{{text}} 看到没，指令中的属性expander-title=‘title‘,这不就是传递父作用域中的属性吗？
③ expander-title与父作用域中的title属性绑定，找到它的值“点击展开”；
④ 将title的值显示在模板中。
注意：指令中的独立作用域中的属性title是为了给下面的模板使用 的，而title所对应的值，要依据页面中指令的使用传人具体的父作用域中的属性，完成属性的绑定操作。
总之、我们可以利用angularjs为我们提供的数据绑定策略来实现从父作用域向指令中传值，这个很有用哦！
来自：http://www.2cto.com/kf/201504/391807.html 解析angularjs中的三种数据绑定策略
标签：src 获取 输入 help type and rest table highlight
原文地址：http://www.cnblogs.com/QQxiong/p/6646705.html
