Question

我试图按照此链接的教程构建一个简单的指令：http://slides.com/djsmith/deep-dive-into-custom-directives（我认为它的幻灯片11和12，没有编号）。

因为它只显示了JavaScript部分和HTML部分的一小部分（只是文本输入）。我创建了自己的html页面如下：

<!DOCTYPE html>
  <html>
    <head>
      <title>Directives</title>
      <script src="Scripts/angular.min.js"></script>
      <script src="Scripts/angular-route.min.js"></script>
      <script src="Scripts/app.js"></script>
    </head>
    <body ng-app="MyDirectives" ng-controller="DirectivesController">
     <input type="text" select-all-on-focus />
    </body>
</html>

带有模块和控制器的JS文件（只是一个空文件，我认为没有一个可能是问题）和指令：

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

myModule.controller('DirectivesController', ['$scope', function ($scope) {

}]);

myModule.directive('selectAllOnFocus', function () {
    return {
        restrict: 'A', 
        link: function linkFn (scope, element, attrs) {
            element.mouseup(function (event) {
              alert("Lost focus!");
              event.preventDefault();
            });
            element.focus(function () {
              element.select();
              alert("Focused!");
            });
        }
      }
});

Chrome控制台上显示的错误是：

TypeError：undefined不是函数在linkFn 在J. 在f 在J. 在f 在 ... 在 ... at h。$ get.h. $ eval at h。$ get.h. $ apply 在http：//

链接功能似乎有问题。

Answer 1

AngularJS的jqLite实现并没有友好的点击，鼠标等方法。你应该使用.on代替：

myModule.directive('selectAllOnFocus', function () {
    return {
        restrict: 'A', 
        link: function(scope, element, attrs) {
            element.on("mouseup", function (event) {
              alert("Lost focus!");
              event.preventDefault();
            });
            element.on("focus", function () {
              element.select();
              alert("Focused!");
            });
        }
      }
});

jsFiddle

Answer 2

为什么要命名链接功能？只需传递一个匿名函数。

link: function (scope, element, attrs) {
   //...
}

使用angular.element时，使用代码的问题是可用的。它是jQuery Lite的实现，并没有让您访问所有方法。

因此，要绑定事件侦听器，您需要使用。

element.on('mousedown', function() {
  //...
}

这是angular.element definition

Answer 3

该教程的工作方式由Dave Smith提供，但JQuery是必需的。请参阅Plunk http://plnkr.co/edit/8EgmrYExKXlMzhwIO9Rv?p=info

如果您在https://docs.angularjs.org/api/ng/function/angular.element查看angular.element文档你会看到mouseup（）不适用于JQLite。

angular.module('myApp.directives',[])

.directive('selectAllOnFocus', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.mouseup(function(event) {
        event.preventDefault();
      });
      element.focus(function() {
        element.select();
      });
    }
  }
})

AngularJS指令的链接函数未定义

3 个答案: