TypeError: element.change is not a function

Question

My directive looks like this

'use strict';  
angular.module('WebApp').directive('someAppFormat', function ($filter, $timeout) {   
return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
    //Functions            
        element.change(function () {
            //Do Something...
        });

I get the following error:

angular.js:12722 TypeError: element.change is not a function
at link (http://localhost/webApp/Scripts/AngularJs/Directives/someAppDirectives.js?v17.0.2.0.2:61:17)
at invokeLinkFn (http://localhost/webApp/Scripts/angular.js:9039:9)
at nodeLinkFn (http://localhost/webApp/Scripts/angular.js:8533:11)
at compositeLinkFn (http://localhost/webApp/Scripts/angular.js:7929:13)
at compositeLinkFn (http://localhost/webApp/Scripts/angular.js:7932:13)
at compositeLinkFn (http://localhost/webApp/Scripts/angular.js:7932:13)
at publicLinkFn (http://localhost/webApp/Scripts/angular.js:7809:30)
at boundTranscludeFn (http://localhost/webApp/Scripts/angular.js:7947:16)
at controllersBoundTransclude (http://localhost/webApp/Scripts/angular.js:8560:18)
at ngRepeatAction (http://localhost/webApp/Scripts/angular.js:27921:15) <input type="text"  
class="someAppValidatorSpan ng-pristine ng-untouched ng-valid" id="someAppPercentInput" 
name="someAppPer{{$index + 1}}" ng-model="someAppVm.someAppPercentages[$index]" 
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 20000, 'blur': 0 } }" 
someApp-format="">

I believe the element.change (function) is legitimately a function and that my issue is elsewhere. Could I be missing some dependency?

Answer 1

Don't just belive, read about it. =)

AngularJS element does not have a change function & https://docs.angularjs.org/guide/directive

Element is the jqLite-wrapped element that this directive matches

You can use the jqLite Methode on() to make this work. In that way you dont need to mix jQuery with AngularJS.

link: function (scope, element, attrs, ctrl) {
    element.on('change', function () {
        //all your goodness
    });
}

Answer 2

Unless you have included jQuery.js in page, and included it before angular.js, angular.element does not have a change() method

Use bind() or in newer versions on()

link: function (scope, element, attrs, ctrl) {

        element.bind('change', function () {
            //Do Something...
        });
        // or 
        element.on('change', function () {
            //Do Something...
        });


}

Or you can use ng-change

Answer 3

In your directive link function you are passing in the element as "element", but the in the function you are attempting to reference "elm" which not defined from what I can see. Angular element does not have a change function as others have stated, but you need to reference "element", instead of "elm".

'use strict';  
angular.module('WebApp').directive('someAppFormat', function ($filter, $timeout) {   
return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
    //Functions            
        element.on('change', function () {
            //Do Something...
        });