AngularJS 自定义指令详解

版权声明：本文为博主原创文章，未经博主允许不得转载。 //blog.csdn.net/qq_27626333/article/details/52261409

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

[javascript] view plain copy

  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

注意：

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

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

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

实例：

[html] view plain copy

  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. <!-- directive:hello -->
  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>

2、priority: Number

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

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

3、template: String or Function

（1）、字符串

template是指令链接DOM模板

[html] view plain copy

  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

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

[javascript] view plain copy

  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>

4、emplateUrl: String

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

[html] view plain copy

  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. <hello></hello>
  9. </body>
  10. <script src="framework/angular-1.3.0.14/angular.js"></script>
  11. <script type="text/javascript">
  12. var myModule = angular.module("MyModule", []);
  13. myModule.directive("hello", function() {
  14. return {
  15. restrict: ‘AECM‘,
  16. templateUrl: ‘hello.html‘,
  17. replace: true
  18. }
  19. });
  20. </script>
  21. </html>

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

[html] view plain copy

  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>

5、replace: Boolean

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

[html] view plain copy

  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>

6、transclude: Boolean

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

[html] view plain copy

  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>

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

  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>

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

[html] view plain copy

  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>

8、controller和require

（1）、controller

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

1）、字符串

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

[javascript] view plain copy

  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

  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

  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内建的指令，其中大部分时间需要require的都是ngModel这个指令。

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

[html] view plain copy

  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>

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

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

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

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

（4）?^组合

引用内置指令

[javascript] view plain copy

  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

  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的值也随之变化，反之亦如此。（继承不隔离）

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

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

（2）、scope的绑定策略

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

[html] view plain copy

  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

  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

  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>

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

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

[html] view plain copy

  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>

原文地址：https://www.cnblogs.com/callmeguxi/p/8568714.html

时间： 2024-08-07 18:21:23

AngularJS 自定义指令详解的相关文章

AngularJS自定义指令详解（有分页插件代码）

前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

AngularJs自定义指令详解（5） - link

在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如果指令使用了require选项,那么链接函数会有第四个参数,代表控制器或者所依赖的指令的控制器. // require 'SomeController',link: function(scope, element, attrs, SomeController) { // 在这里操作DOM,可以访问r

angular 自定义指令详解 Directive

在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令. 本篇文章的参考来自  AngularJS权威指南 , 文章中主要介绍指令定义的选项配置 废话不多说,下面就直接上代码 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDi

angular 自定义指令 详解--restrict、restrict、replace

Angularjs 允许根据实际业务需要自定义指令, 通过angular全局对象下的 directive 方法实现.可以自定义属性.自定义标签.自定义功能 接下来定义一个名叫custom的指令,并利用这个自定义指令来实现元素的替换 html代码: <body ng-app="app"> <p custom></p> <custom></custom> js代码: var app = angular.module("a

day3 自定义指令详解

在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令. 本篇文章的参考来自  AngularJS权威指南 , 文章中主要介绍指令定义的选项配置 废话不多说,下面就直接上代码 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDi

angularJs之指令详解(一)

指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令.这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用.在这篇文章的最后(第二部分),我会指导你如何使用Angular指令来创建一个简单的记事本应用. 概述 一个指令用来引入新的HTML语法.指令是DOM元素上的标记,使元素拥有特定的行为.举例来说,静态的HTML不知道如何来创建和展现一个日期选择器控件.让HTML能识别这个语法,我们需要

Vue.js 源码分析(二十三) 高级应用 自定义指令详解

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局

angular的自定义指令---详解

1.angualr指令 在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的指令也是基于下面所用到的步骤来创建的,只不过他都添加到了全局中,所以可以直接使用: 2.创建自定义指令 首先创建模块app,再使用app的服务directive方法, 创建指令内容第一个参数自定义的名字,第二个参数是自定义参数属性对象,该对象包括的属性基本在代码注释解释清楚: // a.创建模块 v

vue2.0 自定义指令详解

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </head> <body> <div id="app"> <div v-lang="color