CODEWITHSUNDEEP
javascriptangularjs
Vishal
Vishal

Reputation: 6378

Value of attribute in directive is always undefined

Here is my custom directive:

angular
    .module('accountApp')
    .directive('uniqueRecord', function($q, $timeout, $http) {
        return {
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {

                ctrl.$asyncValidators.uniqueRecord = function(modelValue, viewValue) {

                    var value = modelValue || viewValue;

                    var attributes = scope.$eval(attrs.uniqueRecord);

                    // Lookup effect by name
                    return $http.get(attributes.url + '/' + value + '/' + ((attributes.currentRecordName == '' || attributes.currentRecordName == 'nothing') ? '_' : attributes.currentRecordName))
                                .then(function resolved() {
                                    //username exists, this means validation fails
                                    return $q.reject('exists');
                                }, function rejected() {
                                    //username does not exist, therefore this validation passes
                                    return true;
                                });
                };
            }
        }
    });

Here is the HTML:

<input type="text" id="name" name="name" class="form-control form-input" ng-model="effect.name"
        ng-disabled="isReadOnly" required 
        unique-record="{ url: '/api/effect', currentRecordName: {{currentEffectName == '' ? 'nothing' : currentEffectName}} }" 
        ng-uniqueRecord-err-type="duplicateRecord"/>

As you can see in the above HTML, I am passing the value of currentRecordName to directive. In directive the value of url is passed as is but the value of currentRecordName is always undefined. Why?

Upvotes: 0

Views: 44

Answers (1)

Julien TASSIN
Julien TASSIN

Reputation: 5212

The problem comes from your utilisation of mustache in the evaled expression. An evaled expression is already considered as an angular expression and does not need the mustache.

I suggest you to change your html to :

<input type="text" id="name" name="name" class="form-control form-input" ng-model="effect.name"
    ng-disabled="isReadOnly" required 
    unique-record="{ url: '/api/effect', currentRecordName: currentEffectName }" 
    ng-uniqueRecord-err-type="duplicateRecord"/>

And handle the currentEffectName vs 'nothing' directly in the directive code.

var attributes = scope.$eval(attrs.uniqueRecord);
if (!attributes.currentRecordName) {
  attributes.currentRecordName = 'nothing';
}

Upvotes: 1

Related Questions