简单的 AngularJs 自定义指令不起作用答案

【问题标题】：Simple AngularJs custom directive not working简单的 AngularJs 自定义指令不起作用
【发布时间】：2014-07-20 20:10:23
【问题描述】：

我是 AngularJS 的新手，并且有一个非常简单的示例无法正常工作。我希望有人能告诉我我错过了什么。它应该在鼠标输入时更改颜色并在单击时更改html：

http://plnkr.co/edit/fQ5nejywl1taPSpZuBVv?p=preview

index.html:

<!doctype html>
<html ng-app="app">

<head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
 </head>

 <body>
    <div my-dom-directive>Click me!!</div>
 </body>

</html>

script.js

var app = angular.module('app', []);

(function(){

   var directive = function() {
     return {
       link: function($scope, element, attrs) {
         element.bind('click', function() {
         element.html('Clicked I am!');
        });

        element.bind('mouseenter', function() {
           element.css('background-color', 'yellow');
        });

        element.bind('mouseleave', function() {
           element.css('background-color', 'white');
        });
      }  
    };
  };

  angular.module('app').directive('myDomDirective', directive);
})

如果我不使用自调用方法来添加指令，它可以正常工作。

谢谢。

【问题讨论】：

你错过了函数调用

标签： javascript angularjs angularjs-directive

【解决方案1】：

尝试调用你的自调用函数。即（）在最后。

或替代方案：

 var app = angular.module('app', []);

(function(module){

   var directive = function() {
     return {
        link: function($scope, element, attrs) {
        element.bind('click', function() {
        element.html('Clicked I am!');
        });

        element.bind('mouseenter', function() {
           element.css('background-color', 'yellow');
        });

        element.bind('mouseleave', function() {
           element.css('background-color', 'white');
        });
      }  
   };
  };

  module.directive('myDomDirective', directive);
})(app);

第二种方法将您的模块作为参数传递给您的自调用函数。

【讨论】：

【解决方案2】：

您没有调用自调用函数。您需要在该函数定义的末尾加上 '()' 来调用它，因为此时您只是将它包裹在括号中。

var app = angular.module('app', []);

(function(){

   var directive = function() {
     return {
       link: function($scope, element, attrs) {
         element.bind('click', function() {
         element.html('Clicked I am!');
        });

        element.bind('mouseenter', function() {
           element.css('background-color', 'yellow');
        });

        element.bind('mouseleave', function() {
           element.css('background-color', 'white');
        });
      }  
    };
  };

  // you could just use closure here as the app variable is available
  app.directive('myDomDirective', directive);
}());

【讨论】：

【解决方案3】：

删除包装指令的函数（我看不出有它的意义）并注意指令是如何创建的（直接使用 app.directive(...) ）：

var app = angular.module('app', []);

var directive = function() {

    return {
        link: function($scope, element, attrs) {
            element.bind('click', function() {
                element.html('Clicked I am!');
            });

            element.bind('mouseenter', function() {
                element.css('background-color', 'yellow');
            });

            element.bind('mouseleave', function() {
                element.css('background-color', 'white');
            });
        }
    };
  };

  app.directive('myDomDirective', directive);

或者除非你有特殊原因，否则单独声明指令会更好：

app.directive('myDomDirective',function() {
    return {
        ...
    }
});

【讨论】：

根据这篇文章，这是一个有用的模式，可以将事情排除在全局范围之外：weblogs.asp.net/dwahlin/…，但我不确定它在这种情况下是否有任何区别。