AngularJS link function of directive undefined

Question

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

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.

You don't need to name your link function. link: function(scope, element, attrs) will do — CodingIntrigue
– CodingIntrigue, Commented May 23, 2014 at 13:25
Are you getting undefined is not a function on mouseup by any chance? — CodingIntrigue
– 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
– RasikaSam, Commented Jun 25, 2015 at 2:17

CodingIntrigue · Accepted Answer · 2014-05-23 13:34:27Z

6

AngularJS'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

answered May 23, 2014 at 13:34

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rokata Over a year ago

Hmm, there are no errors now, but obviously there is no select() function on the "focus" event (undefined error on select()). Mouseup event is not executing on the other side (if I'm getting it right this should execute when I lose focus?).

Rokata Over a year ago

However these are issues of other essence so I guess the questions is solved. Thanks!

CodingIntrigue Over a year ago

@RosenDimov Yup, just need to chain the events and not use alert! jsfiddle.net/qu6JD

Rokata Over a year ago

Thanks for the fiddle, I just have one question - why this.select() worked and element.select() didn't? Is this.select() the way to select the input in AngularJS?

CodingIntrigue Over a year ago

@RosenDimov Same issue that AngularJS does not provide shortcut methods. this.select() is not using jQuery, but using the default browser's select() method.

Sten Muchow · Accepted Answer · 2014-05-23 13:35:35Z

1

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

edited May 23, 2014 at 13:35

answered May 23, 2014 at 13:26

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

2 Comments

gkalpak Over a year ago

It has nothing to do with the error and naming function is SUCH a good idea. (In fact all Angular's inline functions are named and it is trmendously helpful for stuff like debugging, profiling etc.)

gkalpak Over a year ago

You figure once you open the DevTools and try to debug some weird issue or profile your app or use Batarang or...

Mick Cullen · Accepted Answer · 2014-10-26 16:27:00Z

0

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

answered Oct 26, 2014 at 16:27

Mick Cullen

9,4543 gold badges23 silver badges17 bronze badges

Collectives™ on Stack Overflow

AngularJS link function of directive undefined

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related