I'm trying to build a simple directive following the tutorial from this link: (it's slides 11 and 12 I think, there is no numbering).
Since it just shows the JavaScript part and small part of the HTML part (just the text input). I made my own html page as follows:
<!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:
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:
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://
There seems to be a problem with the link function.
I'm trying to build a simple directive following the tutorial from this link: http://slides./djsmith/deep-dive-into-custom-directives (it's slides 11 and 12 I think, there is no numbering).
Since it just shows the JavaScript part and small part of the HTML part (just the text input). I made my own html page as follows:
<!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:
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:
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://
There seems to be a problem with the link function.
Share Improve this question asked May 23, 2014 at 13:22 RokataRokata 1,25715 silver badges34 bronze badges 4-
You don't need to name your link function.
link: function(scope, element, attrs)will do – CodingIntrigue Commented May 23, 2014 at 13:25 - Still not working, the error is the same. – Rokata Commented May 23, 2014 at 13:30
-
Are you getting undefined is not a function on
mouseupby any chance? – CodingIntrigue Commented May 23, 2014 at 13:33 - you are defining the directive as an A (attribute). That is why mouseup/focus functions are not working – RasikaSam Commented Jun 25, 2015 at 2:17
3 Answers
Reset to default 6AngularJS's jqLite implementation doesn't have friendly methods for click, mouseup, etc. You should use .on instead:
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
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. It is am implementation of jQuery Lite and doesnt give you access to all the methods.
So to bind event listeners you will need to use.
element.on('mousedown', function() {
//...
}
This is the angular.element definition
The tutorial works as given by Dave Smith but JQuery is required. See Plunk http://plnkr.co/edit/8EgmrYExKXlMzhwIO9Rv?p=info
If you check the angular.element docs at https://docs.angularjs/api/ng/function/angular.element you will see the mouseup() is not available with 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();
});
}
}
})
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744712459a4589422.html
评论列表（0条）