指令的AngularJS链接函数未定义
[英]AngularJS link function of directive undefined
问题描述
I'm trying to build a simple directive following the tutorial from this link: http://slides.com/djsmith/deep-dive-into-custom-directives (it's slides 11 and 12 I think, there is no numbering). 
我正在尝试通过此链接按照本教程建立一个简单的指令： http : //slides.com/djsmith/deep-dive-into-custom-directives （我认为是幻灯片11和12，没有编号）。
Since it just shows the JavaScript part and small part of the HTML part (just the text input). 由于它仅显示JavaScript部分和HTML部分的一小部分（仅是文本输入）。 I made my own html page as follows: 我制作了自己的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>
The JS file with the module and the controller (just an empty one, I thought not having one might be the problem) and the directive: 具有模块和控制器的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!");
});
}
}
});
The error which appears on the Chrome console is: Chrome控制台上显示的错误是：
TypeError: undefined is not a function at linkFn at J at f at J at f at ... at ... at h.$get.h.$eval at h.$get.h.$apply at http:// TypeError：undefined不是在J处的linkFn处的函数f在J处的f处...在...的处h。$ get.h. $ eval在h。$ get.h. $适用于http：//
There seems to be a problem with the link function. 链接功能似乎有问题。
3 个解决方案
解决方案1
5 已采纳 2014-05-23 13:34:27
AngularJS's jqLite implementation doesn't have friendly methods for click, mouseup, etc. You should use .on instead: AngularJS的jqLite实现没有用于click，mouseup等的友好方法。您应该改用.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!");
});
}
}
});
解决方案2
1 2014-05-23 13:26:11
Why are you naming the link function? 为什么要命名链接功能？ Just pass it an anonymous function. 只需将其传递给匿名函数即可。
link: function (scope, element, attrs) {
//...
}
The problem though with the code is what is available to you when using angular.element. 但是，代码的问题是使用angular.element时可以使用的内容。 It is am implementation of jQuery Lite and doesnt give you access to all the methods. 它是jQuery Lite的实现，不能让您访问所有方法。
So to bind event listeners you will need to use. 因此，绑定事件侦听器将需要使用。
element.on('mousedown', function() {
//...
}
This is the angular.element definition 这是angular.element 定义
解决方案3
0 2014-10-26 16:27:00
The tutorial works as given by Dave Smith but JQuery is required. 该教程按Dave Smith的说明进行工作，但需要JQuery。 See Plunk http://plnkr.co/edit/8EgmrYExKXlMzhwIO9Rv?p=info 参见Plunk http://plnkr.co/edit/8EgmrYExKXlMzhwIO9Rv?p=info
If you check the angular.element docs at https://docs.angularjs.org/api/ng/function/angular.element you will see the mouseup() is not available with JQLite. 如果在https://docs.angularjs.org/api/ng/function/angular.element上检查angular.element文档，您将看到JQLite不提供mouseup（）。
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();
});
}
}
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.