CODEWITHSUNDEEP
javascriptangularjs
Alex R Chies
Alex R Chies

Reputation: 84

White space added by AngularJS after variable write in a for attribute

I'm fighting with a mystical Angular feature (or bug, I don't know). I have a label and an input written by different directives so, to bind them through the id/for attributes, I pass the id value as an @ variable to the label scope. The problem is that Angular adds a white space after the variable in the for attribute so the connection doesn't work. I print the variable in the link and in the template to ensure that there are no unexpected white spaces in the variable and the result is correct (no white spaces in the variable).

Check the code.

This is the directive:

(function() {
'use strict';

angular
    .module('egeo.forms')
    .directive('egeoCLabel', egeoCLabel);

egeoCLabel.$inject = ['EgeoConfig'];

function egeoCLabel(EgeoConfig) {
    var directive = {
        link: link,
        replace: true,
        restrict: 'E',
        scope: {
            for: '@',
            hasHelp: '=',
            id: '@',
            label: '@',
            isHelpShown: '=',
            required: '@'
        },
        templateUrl: EgeoConfig.getEgeoPath() + '/components/label/components.label.tpl.html'
    };

    return directive;

    function link(scope, element, attrs, ctrl) {
        scope.toggleHelp = function() {
            scope.isHelpShown = !scope.isHelpShown;
        }         
    }
}
})();

This is the template:

<label for="{{for}}" class="egeo-c-label" ng-show="{{(label != null)}}">
{{label}}

<span class="egeo-c-label__optional-mark" data-ng-if="!required"></span>

<i class="egeo-c-icon icon-help2" data-ng-if="hasHelp" data-ng-click="toggleHelp()">
</i>
</label>

And the renderized result is:

<label for="username " class="egeo-c-label ng-binding ng-isolate-scope" ng-show="true" data-label="username" data-required="true" data-is-help-shown="vm.isHelpShown" data-has-help="vm.hasHelp">
username

<!-- ngIf: !required -->

<!-- ngIf: hasHelp --><i class="egeo-c-icon icon-help2 ng-scope" data-ng-if="hasHelp" data-ng-click="toggleHelp()">
</i><!-- end ngIf: hasHelp -->

I don't know why, Angular adds a white space after the for attribute althought it doesn't exist in the variable value.

Upvotes: 2

Views: 1451

Answers (1)

Kevin
Kevin

Reputation: 146

I ran into the same issue and solved it by renaming my isolate scope property. Looks like a naming collision problem.

Change your isolate scope definition to:

scope: {
  myFor: '@'
}

Pass data to it: 

<egeo-c-label data-my-for="{{id}}">

Use it in your directive:

<label for="{{myFor}}">

Upvotes: 3

Related Questions