CODEWITHSUNDEEP
angularjsangularjs-directive
ghaschel
ghaschel

Reputation: 1355

Using angular scope directive variable content as an attribute itself

I couldn't find the answer to this question anywhere, so I'm gonna ask it here. Is there any way to use an Angular scope directive variable content as an attribute itself?

For example:

View Input:

<custom-directive
    attr-one="Atribute value 1"
    ng-model="cool.model"
    message="Message 1"
    extra-attr="variable-attribute"
></custom-directive>

Directive file:

app.directive('customDirective', [
    function () {
        return {
            restrict: 'E',
            templateUrl: createuri('/templates/custom-directive'),
            require: 'ngModel',
            scope: {
                message: '@message',
                ngModel: '=ngModel',
                extraAttr: '@extraAttr',
                attrOne '@attrOne'
           }
        }
    }
]);

Directive template file:

<input type="text"
    attr-one="attrOne"
    class="input-directive"
    ng-model="ngModel"
    message="message"
    {{extraAttr}} %{--something like this--}%
/>

In a way that the output would end up like this:

<input type="text"
    attr-one="Atribute value 1"
    class="input-directive"
    ng-model="cool.model"
    message="Message 1"
    variable-attribute
/>

Edit: I'm not sure it's a assignment error, because when I try to use a variable that is working ({{label}}), for eg., this is what i get:

Ta-dah!

The variable gets outputed inside the element's content area, but not inside the element attribute definition area.

Upvotes: 1

Views: 279

Answers (2)

ghaschel
ghaschel

Reputation: 1355

I end up finding the answer, and it consists on using the compile directive function as It runs before the link one.

/*[...]*/
priority: 1001,
terminal: true,
compile: function(el, attr) {
    var ipt = el[0].childNodes[0].childNodes[1];
    /* ^ searching for the element I want to bind the directive attribute to*/
    ipt.setAttribute(attr.extraAttr, '');
    /* ^ setting the attribute to the value contained in extraAttr */
}
/*[...]*/

Upvotes: 0

Vu Quyet
Vu Quyet

Reputation: 1705

As said in here: "Web browsers are sometimes picky about what values they consider valid for attributes."

Try to use ngAttr for this:

ng-attr-label="{{yourLabelValue}}"

label can be replaced with any attribute name such as ng-attr-variable-attribute="{{attributeValue}}" for "variable-attribute".

Upvotes: 1

Related Questions