序

我们想达到这样的效果：当我们点击标题时，我们会显示以下内容，然后点击它将其收回。

首先，回顾一下有哪些绑定策略？

看这个有点抽象，我们来看看具体的例子分析！

第二，一个简单的演示示例

@ binding:传递一个字符串作为属性值。

例如，字符串：“@ string”

控制器中的代码部分示例：

我的导演。控制器(' my ctrl 3 '，['$ scope '，函数($ scope) {$ scope。ctrl风味='鸡尾酒'；$ scope.sayHello=函数(名称){ alert('Hello '名称)；};}]);My direc.directive('饮品'，function(){ return { restrict : ' AE '，scope : { flavor 3360 ' @ '//自动绑定，传递字符串}，template3360' div {{flavor}}/div '，}；});在页面中使用标签的示例：

div ng-controller=' my ctrl 3 ' drink flavor=' { { ctrl flavor } } '/饮料/div分析为什么我们可以在饮料指令中获取父作用域中的值。原因是我们使用了@ binding策略，可以将ctrlFlavor赋给Flavor，这样就可以得到模板中的值。

=binding:指定获得的属性的类型是父范围的属性

My direc.directive ('drink2 '，function(){ return { restrict : ' AE '，scope : { flavor 3360 '='//auto binding }，template : '输入类型=' text ' ng-model=' flavor '/' }；});页面：

div ng-controller=' my ctrl 3 ' drink 2风味=' ctrl风味'/drink2/div的流程如下：

(1)编译指令时，会扫描模板中的模型，找到一种味道。

(2)找出是否在作用域中定义：通过=绑定到父作用域，通过传递属性ctrlFlavor在父范围内；

风味绑定到父作用域中的ctrlFlavor属性，找到其值“鸡尾酒”；

在模板中显示模型的值。

绑定：父作用域中的函数被传递

控制器部分：

myDirec.directive('问候语'，function(){ return { restrict : ' AE '，scope:{ greet:'' }，Template3360 '输入类型=' text ' ng-model=' username '/br/' ' button ng-click=' greet({ name : username })'问好/button br/' }；});页面部分：

Div ng-controller=' my ctrl 3 '问候语问候语=' say hello(name)'/问候语问候语问候语=' say hello(name)'/问候语问候语问候语=' say hello(name)'/问候语/div从结果来看，三个输入框中的内容不会相互影响，因为它们都是新的独立范围

第三，扩展器示例

首先看控制器代码：

/*Expander示例*/mydiec . controller(' some controller '，function ($ scope) {$ scope.title='点击展开'；$scope.text='这里是内部显示内容'；});myDirec.directive('expander ')，function(){ return { restrict : ' EA '，replace : true，transclude : true，scope : { title : '=expander title ' }，template : ' div ' ' div class=' title ' ng-click=' toggle()' { { title } }/div ' ' class=' body ' ng-show=' show me ' ng-trans clude/div ' '/div '，link : function(scope . toggle=function(){ scope . show me=！scope.showMe};} };});查看页面部分：

div ng-controller=' some controller ' expander class=' expander ' expander-title=' title ' { text } }/expander/div的流程如下：

(1)编译指令时，会扫描模板中的模型，找到一个{{title}}。

(2)找出是否在作用域中定义：通过=，通过传递父作用域中的属性，绑定到父作用域；

我在这里总是很困惑。解释一下“方法是在父范围内传递属性”。这个用在哪里？

div ng-controller=' some controller ' expander class=' expander ' expander-title='title ' { text } }/expander/div看，指令中的属性expander-title=' title '，这不就是父作用域中的属性吗？

expander-title绑定到父作用域中的title属性，找到其值“点击展开”；

显示模板中标题的值。

注意：指令独立作用域中的属性title用于后面的模板，title对应的值要根据页面中指令的使用转移到具体的父作用域中的属性，完成属性的绑定操作。

总之，我们可以使用angularjs提供的数据绑定策略，将值从父作用域转移到指令，非常有用！

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。