Question

我是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);
})

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

感谢。

Answer 1

您没有调用自调用函数。你需要＆＃39;（）＆＃39;在该函数定义的末尾调用它，因为你现在只是将它包装在括号中。

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);
}());

Answer 2

尝试调用自我调用函数。 I.e（）最后。

或替代方案：

 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);

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

Answer 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 {
                ...
            }
      });

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

3 个答案: