AngularJS custom directive doesn't load

Question

I'm using angular 1.4.x.

I'm making a custom directive that checks weather a field is unique on the server (the field is called "jmbg"). I have the following code:

(function() {
angular
    .module('app')
    .directive('uniqueJmbg', uniqueJmbg);

uniqueJmbg.$inject = ['$q', '$http'];
function uniqueJmbg($q, $http) {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModelCtrl) {
        ngModelCtrl.$asyncValidators.uniqueJmbg = function(modelValue, viewValue) {
            var value = modelValue || viewValue;

            return $http.get('/server/users/' + value)
                .then(function resolved() {
                    return $q.reject('exists');
                }, function rejected() {
                    return true;
             });
        };
    }
}
})();

I am using the directive in HTML in the following way:

<input class="form-control" type="text" id="jmbg" name="jmbg" ng-model="rad.radnik.jmbg" ng-model-options="{ updateOn: 'default blur', debounce: {'default':400, 'blur':0 } }" unique-jmbg/>

In case it matters, I'm using my controllers with the controllerAs syntax. Now, what happens is that the file containing my uniqueJmbg definition never loads (I can't see it in the browser debugger). If I move my code to a component which does load the app stops working (and there are no errors in the console), so there is no way for me to debug this.

Any idea what might be so wrong I can't even access the code in the browser?

This may sound a bit silly, but are you loading the directive.js file in your index.html file? — Nick Salloum
– Nick Salloum, Commented Sep 6, 2015 at 19:58

Davion · Accepted Answer · 2015-09-06 18:56:17Z

1

Add dependencies to the module

angular
    .module('app', [])
    .directive(...

And you need to return an object from the module, so the correction would be:

function uniqueJmbg($q, $http) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModelCtrl) {
            ...
        }
    };
}

answered Sep 6, 2015 at 18:56

Davion

9217 silver badges12 bronze badges

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

5 Comments

Alexis King Over a year ago

I think your first correction is wrong—from the wording, it sounds like the OP defines the app module elsewhere, in which case the one-argument call to module is correct. The second part of your answer is accurate, though.

Davion Over a year ago

It is defined elsewhere, that's why you need dependencies for the module (if there are any, it can stay as an empty array). So you can inject them there as angular.module('app.whatever.module', ['app.whatever.dependency']).directive()

Alexis King Over a year ago

No no, the OP is using the single-argument version of module to act as a getter. In that case the two-argument version is wrong because it will attempt to redefine a new module with the same name.

Davion Over a year ago

I can see what you're saying, I agree, but I have no idea if he named his main module App, and he's using app as this one. In my previous comment I just gave an example for the nested modules.

NLuburić Over a year ago

That was it. I can't believe I wasted an hour not realizing I didn't return the directive configuration object.

Collectives™ on Stack Overflow

AngularJS custom directive doesn't load

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related