AngularJS 自定义指令详解标签：自定义指令的参数linktemplateUrlscopeAngularJS 自定义指令详解 2016-08-20 15:02 3831人阅读评论(1)

红太狼 2022-06-12 06:45 239阅读 0赞

# [AngularJS 自定义指令详解][AngularJS] #

标签： [自定义指令的参数][Link 1][link][][templateUrl][][scope][][AngularJS 自定义指令详解][AngularJS 1]

除了 [AngularJS][AngularJS 2] 内置的63个指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive，自定义指令的参数如下：

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  angular.module('app', \[\]).directive('myDirective', **function**() \{  
2.      **return** \{  
3.      restrict:String,                  
4.      priority:Number,  
5.      terminal:Boolean,  
6.      template:String or Template Function,  
7.      templateUrl:String or Template Function,  
8.      replace:Boolean or String,  
9.      transclude:Boolean,  
10.     scope:Boolean or Object,  
11.     controller:String or **function**(scope, element, attrs, transclude, otherInjectables) \{ ... \},  
12.     controllerAs:String,  
13.     require:String,  
14.     link: **function**(scope, iElement, iAttrs) \{ ... \},  
15.     compile:**function**(tElement, tAttrs, transclude) \{  
16.         **return** \{  
17.             pre: **function**(scope, iElement, iAttrs, controller) \{ ... \},  
18.             post: **function**(scope, iElement, iAttrs, controller) \{ ... \}  
19.            \}  
20.         **return** **function** postLink(...) \{ ... \}  
21.         \}  
22.     \};  
23.  \});

**1、restrict：String**

restrict是申明标识符在模板中作为元素，属性，类，注释或组合，如何使用。有四个值：E、A、C、M

![Center][]

注意：

（1）、推荐使用元素和属性的方式使用指令

（2）、当需要创建带有自己的模板的指令时，使用元素名称的方式创建指令

（3）、当需要为已有的HTML标签增加功能时，使用属性的方式创建指令

实例：

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **</****head****>**  
6.  **<****body****>**  
7.  **<****hello****>****</****hello****>**  
8.  **<****div** hello**>****</****div****>**  
9.  **<****div** class="hello"**>****</****div****>**  
10.   
11. **</****body****>**  
12. **<****script** src="framework/angular-1.3.0.14/angular.js"**>****</****script****>**  
13. **<****script****>**  
14. var myModule = angular.module("MyModule", \[\]);  
15.         myModule.directive("hello", function() \{  
16.            return \{  
17.             restrict: 'AEMC',  
18.             template: '**<****div****>**Hi everyone!**</****div****>**',  
19.             replace: true  
20.            \}  
21.         \});  
22. **</****script****>**  
23. **</****html****>**

![Center 1][]

2、**priority: Number**

priority是指令执行优先级。若在单个DOM上有多个指令，则优先级高的先执行；

设置指令的优先级算是不常用的

**3、template: String or Function**

（1）、字符串

template是指令链接DOM模板

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **</****head****>**  
6.  **<****body****>**  
7.  **<****hello****>****</****hello****>**  
8.  **</****body****>**  
9.  **<****script** src="framework/angular-1.3.0.14/angular.js"**>****</****script****>**  
10. **<****script****>**  
11. var myModule = angular.module("MyModule", \[\]);  
12. myModule.directive("hello", function() \{  
13.   return \{  
14.        restrict: 'E',  
15.        template: '**<****div****>**hello world**</****div****>**',  
16.        replace: true  
17.   \}  
18. \});  
19. **</****script****>**  
20. **</****html****>**

（2）、函数

Function一个函数，可接受两个参数tElement和tAttrs。其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上所有的属性组成的集合（对象）形如：

**\[html\]**  [view plain][]   [copy][view plain]

1.  \{  
2.    name:‘shanshuizinong,  
3.    age:23  
4.  \}

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  <!doctype html>  
2.  <html ng-app="MyModule">  
3.  <head>  
4.  <meta charset="utf-8">  
5.  </head>  
6.  <body>  
7.  <hello name='shanshuizinong'></hello>  
8.  </body>  
9.  <script src="js/angular.min.js"></script>  
10. <script>  
11. **var** myModule = angular.module("MyModule", \[\]);  
12.         myModule.directive("hello", **function**() \{  
13.            **return** \{  
14.             restrict: 'E',  
15.             replace: **true**,  
16.             template: **function**(tElement,tAttrs)\{  
17.                     **var** html = '';  
18.                     html += '<div>'\+tAttrs.name+'</div>';  
19.                     **return** html;  
20.                  \}  
21.            \}  
22.         \});  
23. </script>  
24. </html>

![Center 2][]

**4、emplateUrl: String**

templateUrl是指定一个字符串式的内嵌模板，如果你指定了模板是一个URL，那么是不会使用的。

**\[html\]**  [view plain][]   [copy][view plain]

![Center 3][]

由于加载html模板是通过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板。

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **</****head****>**  
6.  **<****body****>**  
7.  **<****hello****>****</****hello****>**  
8.  **</****body****>**  
9.  **<****script** src="framework/angular-1.3.0.14/angular.js"**>****</****script****>**  
10. **<****script** type="text/javascript"**>**  
11.   var myModule = angular.module("MyModule", \[\]);  
12.       //注射器加载完所有模块时，此方法执行一次;缓存  
13.       myModule.run(function($templateCache)\{  
14.      $templateCache.put("hello.html","**<****div****>**Hello world!!!**</****div****>**");  
15.       \});  
16.       myModule.directive("hello", function($templateCache) \{  
17.          return \{  
18.            restrict: 'AECM',  
19.            template: $templateCache.get("hello.html"),  
20.            replace: true  
21.          \}  
22.       \});  
23. **</****script****>**  
24. **</****html****>**

![Center 4][]

**5、replace: Boolean**

replace是指令链接模板是否替换原有元素

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **</****head****>**  
6.  **<****body****>**  
7.  **<****hello****>**  
8.  **<****div****>**这里是指令内部的内容。**</****div****>**  
9.  **</****hello****>**  
10. **</****body****>**  
11. **<****script** src="js/angular.min.js" type="text/javascript" charset="utf-8"**>****</****script****>**  
12. **<****script** type="text/javascript"**>**  
13. var myModule = angular.module("MyModule", \[\]);  
14.     myModule.directive("hello", function() \{  
15.       return \{  
16.         restrict:"AE",  
17.         template:"**<****div****>**Hello World!**</****div****>**",  
18.         replace:true  
19.       \}  
20.     \});  
21. **</****script****>**  
22. **</****html****>**

![Center 5][]

**6、transclude: Boolean**

transclude是移动一个标识符的原始字节带到一个新模块的位置。当你开启transclude后，你就可以使用ng-transclude来指明了应该在什么地方放置transcluded内容。

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **</****head****>**  
6.  **<****body****>**  
7.  **<****hello****>**  
8.  **<****div****>**这里是指令内部的内容。**</****div****>**  
9.  **</****hello****>**  
10. **</****body****>**  
11. **<****script** src="js/angular.min.js"**>****</****script****>**  
12. **<****script** type="text/javascript"**>**  
13. var myModule = angular.module("MyModule", \[\]);  
14.     myModule.directive("hello", function() \{  
15.        return \{  
16.         restrict:"AE",  
17.         transclude:true,  
18.         template:"**<****div****>**Hello everyone!**<****div** ng-transclude**>**你看不见我**</****div****>****</****div****>**"  
19.        \}  
20.     \});  
21. **</****script****>**  
22. **</****html****>**

![Center 6][]

**7、link：Function**

link通过代码修改目标DOM元素的实例，添加事件监听，建立数据绑定。compile函数用来对模板自身进行转换，而link函数负责在模型和视图之间进行动态关联；compile函数仅仅在编译阶段运行一次，而对于指令的每个实例，link函数都会执行一次；compile可以返回preLink和postLink函数，而link函数只会返回postLink函数，如果需要修改DOM结构，应该在postLink中来做这件事情，而如果在preLink中做这件事情会导致错误；大多数时候我们只要编写link函数即可。

link函数有四个参数分别为：

（1）scope，与指令元素相关联的作用域

（2）element，当前指令对应的 元素

（3）attrs，由当前元素的属性组成的对象

（4）supermanCtrl，若指令中定义有require选项，则会有supermanCtrl参数，代表控制器或者所依赖的指令的控制器。

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **</****head****>**  
6.  **<****body****>**  
7.  **<****hello****>**Hello World!**</****hello****>**  
8.  **</****body****>**  
9.  **<****script** src="js/angular.min.js"**>****</****script****>**  
10. **<****script** type="text/javascript"**>**  
11. var myModule = angular.module("MyModule", \[\]);  
12. myModule.directive("hello", function() \{  
13.   return \{  
14.   restrict:"AE",  
15.   link:function(scope,element,attrs,supermanCtrl)\{  
16.         console.log(element);  
17.         element.bind("mouseenter",function()\{  
18.         console.log("鼠标进入...");  
19.         \});  
20.         element.bind("mouseout",function()\{  
21.         console.log("鼠标滑出...");  
22.         \});  
23.     \}  
24.   \}  
25. \});  
26. **</****script****>**  
27. **</****html****>**

![Center 7][]

下面实例通过link函数实现指令的复用，两个控制器与一个指令之间进行交互。指令可以调用控制器MyCtrl和MyCtrl2中的方法，但是需要注意我们必须使用属性，因为两个控制器的方法不同。

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **</****head****>**  
6.  **<****body****>**  
7.  **<****div** ng-controller="MyCtrl"**>**  
8.  **<****loader** howToLoad="loadData()"**>**滑动加载**</****loader****>**  
9.  **</****div****>**  
10. **<****div** ng-controller="MyCtrl2"**>**  
11. **<****loader** howToLoad="loadData2()"**>**滑动加载**</****loader****>**  
12. **</****div****>**  
13. **</****body****>**  
14. **<****script** src="framework/angular-1.3.0.14/angular.js"**>****</****script****>**  
15. **<****script** type="text/javascript"**>**  
16. var myModule = angular.module("MyModule", \[\]);  
17. myModule.controller('MyCtrl', \['$scope', function($scope)\{  
18.   $scope.loadData=function()\{  
19. console.log("加载数据中111...");  
20.   \}  
21. \}\]);  
22. myModule.controller('MyCtrl2', \['$scope', function($scope)\{  
23.   $scope.loadData2=function()\{  
24.     console.log("加载数据中222...");  
25.   \}  
26. \}\]);  
27. myModule.directive("loader", function() \{  
28. return \{  
29. restrict:"AE",  
30. link:function(scope,element,attrs)\{  
31. element.bind('mouseenter', function(event) \{  
32.         //注意这里的坑，howToLoad会被转换成小写的howtoload  
33.         scope.$apply(attrs.howtoload);  
34.         \});  
35.         \}  
36.     \}  
37. \});  
38. **</****script****>**  
39. **</****html****>**

![Center 8][]

**8、controller和require**

**（1）、controller**

controller创建一个控制器通过标识符公开通信API。给指令暴露出一组public方法，给外部调用的。

1）、字符串

若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  angular.module('myApp', \[\]) .directive('myDirective', **function**() \{  
2.  restrict: 'A',  
3.  controller: 'SomeController'  
4.  \})  
5.  angular.module('myApp').controller('SomeController', **function**($scope, $element, $attrs, $transclude) \{  
6.  // 控制器逻辑放在这里  
7.  \});

2）、匿名函数

也可以直接在指令内部的定义为匿名函数，同样我们可以再这里注入任何服务（$log,$timeout等等）

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  angular.module('myApp',\[\]) .directive('myDirective', **function**() \{  
2.  restrict: 'A',  
3.  controller: **function**($scope, $element, $attrs, $transclude) \{  
4.  // 控制器逻辑放在这里  
5.  \}  
6.  \});

另外还有一些特殊的服务（参数）可以注入

（a）$scope，与指令元素相关联的作用域

（b）$element，当前指令对应的元素

（c）$attrs，由当前元素的属性组成的对象

（d）$transclude，嵌入链接函数，实际被执行用来克隆元素和操作DOM的函数

注意： 除非是用来定义一些可复用的行为，一般不推荐在这使用。

指令的控制器和link函数可以进行互换。区别在于，控制器主要是用来提供可在指令间复用的行为但link链接函数只能在当前内部指令中定义行为，且无法再指令间复用。

下面是实例[js][]中包含controller的一部分：定义了三个公共方法，供外部指令访问。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  **var** myModule = angular.module("MyModule", \[\]);  
2.  myModule.directive("superman", **function**() \{  
3.      **return** \{  
4.          scope: \{\},  
5.          restrict: 'AE',  
6.          controller: **function**($scope) \{  
7.              $scope.abilities = \[\];  
8.              **this**.addStrength = **function**() \{  
9.                  $scope.abilities.push("strength");  
10.             \};  
11.             **this**.addSpeed = **function**() \{  
12.                 $scope.abilities.push("speed");  
13.             \};  
14.             **this**.addLight = **function**() \{  
15.                 $scope.abilities.push("light");  
16.             \};  
17.         \},  
18.         link: **function**(scope, element, attrs) \{  
19.             element.addClass('btn btn-primary');  
20.             element.bind("mouseenter", **function**() \{  
21.                 console.log(scope.abilities);  
22.             \});  
23.         \}  
24.     \}  
25. \});

**（2）、require**

require当前标识符需要另一个标识符提供正确的函数功能。require的值可以是字符串或者数组。字符串代表另一个指令的名字，它将会作为link函数的第四个参数。controller的用法分为两种情形，一种是require自定义的controller，由于自定义controller中的属性方法都由自己编写，使用起来比较简单；另一种方法则是require [angularjs][AngularJS 2]内建的指令，其中大部分时间需要require的都是ngModel这个指令。

下面是实例程序：假设现在我们要编写三个指令，三个指令中的link链接函数中存在有很多重合的方法，这时候我们就可以将这些重复的方法写在一个指令的controller中。然后在这三个指令中，require这个拥有controller字段的的指令，最后通过link链接函数的第四个参数就可以引用这些重合的方法了。

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.      **<****meta** charset="utf-8"**>**  
5.      **<****link** rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"**>**  
6.      **<****script** src="js/angular.min.js"**>****</****script****>**  
7.  **</****head****>**  
8.  **<****body****>**  
9.  **<****div** class="row"**>**  
10. **<****div** class="col-md-3"**>**  
11. **<****superman** strength**>**动感超人---力量**</****superman****>**  
12. **</****div****>**  
13. **</****div****>****<****br****>**  
14. **<****div** class="row"**>**  
15. **<****div** class="col-md-3"**>**  
16. **<****superman** strength speed**>**动感超人2---力量+敏捷**</****superman****>**  
17. **</****div****>**  
18. **</****div****>****<****br****>**  
19. **<****div** class="row"**>**  
20. **<****div** class="col-md-3"**>**  
21. **<****superman** strength speed light**>**动感超人3---力量+敏捷+发光**</****superman****>**  
22. **</****div****>**  
23. **</****div****>**  
24. **</****body****>**  
25. **<****script** type="text/javascript"**>**  
26. var myModule = angular.module("MyModule", \[\]);  
27. myModule.directive("superman", function() \{  
28.     return \{  
29.         scope: \{\},  
30.         restrict: 'AE',  
31.         controller: function($scope) \{  
32.             $scope.abilities = \[\];  
33.             this.addStrength = function() \{  
34.                 $scope.abilities.push("strength");  
35.             \};  
36.             this.addSpeed = function() \{  
37.                 $scope.abilities.push("speed");  
38.             \};  
39.             this.addLight = function() \{  
40.                 $scope.abilities.push("light");  
41.             \};  
42.         \},  
43.         link: function(scope, element, attrs) \{  
44.             element.addClass('btn btn-primary');  
45.             element.bind("mouseenter", function() \{  
46.                 console.log(scope.abilities);  
47.             \});  
48.         \}  
49.     \}  
50. \});  
51. myModule.directive("strength", function() \{  
52.     return \{  
53.         require: '^superman',  
54.         link: function(scope, element, attrs, supermanCtrl) \{  
55.             supermanCtrl.addStrength();  
56.         \}  
57.     \}  
58. \});  
59. myModule.directive("speed", function() \{  
60.     return \{  
61.         require: '^superman',  
62.         link: function(scope, element, attrs, supermanCtrl) \{  
63.             supermanCtrl.addSpeed();  
64.         \}  
65.     \}  
66. \});  
67. myModule.directive("light", function() \{  
68.     return \{  
69.         require: '^superman',  
70.         link: function(scope, element, attrs, supermanCtrl) \{  
71.             supermanCtrl.addLight();  
72.         \}  
73.     \}  
74. \});  
75. **</****script****>**  
76. **</****html****>**

![Center 9][]

另外我们可以在require的参数值加上下面的某个前缀，这会改变查找控制器的行为：

（1）没有前缀，指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个error

（2）？如果在当前的指令没有找到所需的控制器，则会将null传给link连接函数的第四个参数

（3）^如果在当前的指令没有找到所需的控制器，则会查找父元素的控制器

（4）?^组合

引用内置指令

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  angular.module('myApp')    
2.  .directive('spoint', **function**() \{    
3.    **return** \{    
4.      require: 'ngModel',    
5.      link: **function**(scope, elm, attrs, ctrl) \{     
6.        ctrl.$parsers.unshift(**function**(viewValue) \{    
7.          **if** (fibonacci.indexOf(parseInt(viewValue)) >= 0) \{    
8.            ctrl.$setValidity('fibonacci', **true**);    
9.            **return** viewValue;    
10.         \} **else** \{    
11.           ctrl.$setValidity('fibonacci', **false**);    
12.           **return** undefined;    
13.         \}    
14.       \});    
15.     \}    
16.   \};    
17. \});

这里值得注意的是directive里link方法的第四个参数，我们在require里定义了ngModel 所以这里它是一个NgModelController，NgModelController是用来为ng-model提供了一组API。

**9、scope**

scope为这个标识符创建一个新的作用域，而不是继承符作用域。

**（1）、scope的值分别为：false，true，\{\}**

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **<****link** rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"**>**  
6.  **</****head****>**  
7.  **<****body****>**  
8.      **<****div** ng-controller='MyCtrl' style="margin-left: 10px;border: solid 2px greenyellow;padding: 10px;width:400px;"**>**  
9.      Ctrl:**<****br** **/>**  
10.     **<****input** ng-model="userName" **/>**\{ \{userName\}\}**<****br** **/>**  
11.     Directive:**<****br** **/>**  
12.     **<****hello****>****</****hello****>**  
13. **<****hello****>****</****hello****>**  
14.     **</****div****>**  
15. **</****body****>**  
16. **<****script** src="js/angular.min.js"**>****</****script****>**  
17. **<****script** type="text/javascript"**>**  
18. var myModule = angular.module("MyModule", \[\]);  
19. myModule.controller("MyCtrl",function($scope)\{  
20. $scope.userName="山水子农";  
21. \})  
22. myModule.directive("hello", function() \{  
23.    return \{  
24.     restrict: 'AE',  
25.     scope:false,//ture or \{\}  
26.     template: '**<****div****>****<****input** type="text" ng-model="userName"**/>**\{ \{userName\}\}**</****div****>**',  
27.     replace: true  
28.    \}  
29. \});  
30. **</****script****>**  
31. **</****html****>**

当scope为false时：Directive继承Ctrl的值，改变Ctrl的值，Directive的值也随之变化，反之亦如此。（继承不隔离）

![Center 10][]

当scope为true时：Directive继承Ctrl的值，改变Ctrl的值，Directive的值随之变化，但是改变Directive的值，Ctrl的值不变，兄弟Directive的值也不会变。（继承隔离）

![Center 11][]

当scope的值为\{\}时：没有继承Ctrl的值，所以Directive的值为空，改变任何一方的值均不能影响另一方的值。（不继承隔离）

![Center 12][]

**（2）、scope的绑定策略**

**方法1：使用@（@attr）来进行单向文本（字符串）绑定**

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **<****link** rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"**>**  
6.  **</****head****>**  
7.  **<****body****>**  
8.  **<****div** ng-controller="MyCtrl"**>**  
9.  **<****drink** flavor="\{ \{ctrlFlavor\}\}"**>****</****drink****>**  
10. **</****div****>**  
11. **</****body****>**  
12. **<****script** src="js/angular.min.js"**>****</****script****>**  
13. **<****script** type="text/javascript"**>**  
14. var myModule = angular.module("MyModule", \[\]);  
15. myModule.controller('MyCtrl', \['$scope', function($scope)\{  
16. $scope.ctrlFlavor="AngularJs";  
17. \}\])  
18. myModule.directive("drink", function() \{  
19.   return \{  
20. restrict:'AE',  
21.     template:"**<****div****>**\{ \{flavor\}\}**</****div****>**",  
22.     link:function(scope,element,attrs)\{  
23.       scope.flavor=attrs.flavor;  
24.     \}  
25.   \}  
26. \});  
27. **</****script****>**  
28. **</****html****>**

上面的实例可以使用scope为flavor:'@'来代替link函数，注意@传递的是字符串不是对象。

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **<****link** rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"**>**  
6.  **</****head****>**  
7.  **<****body****>**  
8.  **<****div** ng-controller="MyCtrl"**>**  
9.  **<****drink** flavor="\{ \{ctrlFlavor\}\}"**>****</****drink****>**  
10. **</****div****>**  
11. **</****body****>**  
12. **<****script** src="js/angular.min.js"**>****</****script****>**  
13. **<****script** type="text/javascript"**>**  
14. var myModule = angular.module("MyModule", \[\]);  
15. myModule.controller('MyCtrl', \['$scope', function($scope)\{  
16. $scope.ctrlFlavor="AngularJs";  
17. \}\])  
18. myModule.directive("drink", function() \{  
19.   return \{  
20. restrict:'AE',  
21. scope:\{  
22.             flavor:'@'  
23.     \},  
24.     template:"**<****div****>**\{ \{flavor\}\}**</****div****>**"  
25.   \}  
26. \});  
27. **</****script****>**  
28. **</****html****>**

**方法二：使用=（=attr）进行双向绑定**

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  <!doctype html>  
2.  <html ng-app="MyModule">  
3.  <head>  
4.  <meta charset="utf-8">  
5.  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">  
6.  </head>  
7.  <body>  
8.  <div ng-controller="MyCtrl" style="margin-left: 10px;border: solid 2px greenyellow;padding: 10px;width:200px;">  
9.  Ctrl:  
10. <br>  
11. <input type="text" ng-model="ctrlFlavor">  
12. <br>  
13. Directive:  
14. <br>  
15. <drink flavor="ctrlFlavor"></drink>  
16. </div>  
17. </body>  
18. <script src="js/angular.min.js"></script>  
19. <script type="text/javascript">  
20. **var** myModule = angular.module("MyModule", \[\]);  
21. myModule.controller('MyCtrl', \['$scope', **function**($scope)\{  
22. $scope.ctrlFlavor="AngularJs";  
23. \}\])  
24. myModule.directive("drink", **function**() \{  
25.   **return** \{  
26.   restrict:'AE',  
27.   scope:\{  
28.         flavor:'='  
29.   \},  
30.   template:'<input type="text" ng-model="flavor"/>'  
31.   \}  
32. \});  
33. </script>  
34. </html>

![Center 13][]

**方法三：使用&来调用父作用域中的函数**

可以利用前面的link函数取属性的方式来进行绑定，这里更方便的绑定方式就是利用&。

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!doctype html**>**  
2.  **<****html** ng-app="MyModule"**>**  
3.  **<****head****>**  
4.  **<****meta** charset="utf-8"**>**  
5.  **<****link** rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"**>**  
6.  **</****head****>**  
7.  **<****body****>**  
8.  **<****div** ng-controller="MyCtrl"**>**  
9.  **<****greeting** greet="sayHello(name)"**>****</****greeting****>****<****br****/>**  
10. **<****greeting** greet="sayHello(name)"**>****</****greeting****>****<****br****/>**  
11. **<****greeting** greet="sayHello(name)"**>****</****greeting****>****<****br****/>**  
12. **</****div****>**  
13. **</****body****>**  
14. **<****script** src="js/angular.min.js"**>****</****script****>**  
15. **<****script** type="text/javascript"**>**  
16. var myModule = angular.module("MyModule", \[\]);  
17. myModule.controller('MyCtrl', \['$scope', function($scope)\{  
18. $scope.sayHello=function(name)\{  
19. alert("Hello "+name);  
20. \}  
21. \}\])  
22. myModule.directive("greeting", function() \{  
23.    return \{  
24. restrict:'AE',  
25.     scope:\{  
26.         greet:'&'  
27.     \},  
28.     template:'**<****input** type="text" ng-model="userName" **/>****<****br****/>**'+  
29.          '**<****button** class="btn btn-default" ng-click="greet(\{name:userName\})"**>**Greeting**</****button****>****<****br****/>**'  
30.    \}  
31. \});  
32. **</****script****>**  
33. **</****html****>**

![Center 14][]

![Center 15][]

[AngularJS]: http://blog.csdn.net/qq_27626333/article/details/52261409
[Link 1]: http://www.csdn.net/tag/%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8c%87%e4%bb%a4%e7%9a%84%e5%8f%82%e6%95%b0
[link]: http://www.csdn.net/tag/link
[templateUrl]: http://www.csdn.net/tag/templateUrl
[scope]: http://www.csdn.net/tag/scope
[AngularJS 1]: http://www.csdn.net/tag/AngularJS%20%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8c%87%e4%bb%a4%e8%af%a6%e8%a7%a3
[AngularJS 2]: http://lib.csdn.net/base/angularjs
[view plain]: http://blog.csdn.net/qq_27626333/article/details/52261409#
[Center]: /images/20220612/a1a7c366a7b24676ac916edd72bcd71c.png
[Center 1]: /images/20220612/32200deb9d0243019dce95beefd9c776.png
[Center 2]: /images/20220612/17983bc7ee58492aabd7c54e6a2be22f.png
[Center 3]: /images/20220612/ad7bf1f486224cacae6e39a3193c6d3b.png
[Center 4]: /images/20220612/984f23e14b0f4753ac6004a6ddca1acc.png
[Center 5]: /images/20220612/d740deb001a046e5abb444eafa303afc.png
[Center 6]: /images/20220612/760cf6c71d40470394b9efe81a7a0278.png
[Center 7]: /images/20220612/34258dbb35584d488644964472bfb249.png
[Center 8]: /images/20220612/906f2f10701944699f44f1e80d461db2.png
[js]: http://lib.csdn.net/base/javascript
[Center 9]: /images/20220612/ce0586701dcd43bfb86a9c71888efe7d.png
[Center 10]: /images/20220612/9de73f85d8db487d92e78dc7a4a37bbc.png
[Center 11]: /images/20220612/25ba987fb1b341c3a9c8cd2c833a518d.png
[Center 12]: /images/20220612/6709682033c14073a5d5c294b67dda07.png
[Center 13]: /images/20220612/ae6f90d5b2b04672a28f8fa8e114b001.png
[Center 14]: /images/20220612/657c6e27b6054cfa93744689e8d08c9d.png
[Center 15]: /images/20220612/42982e73d314494e992cb7f43802ee93.png