Reputation: 1355
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:
The variable gets outputed inside the element's content area, but not inside the element attribute definition area.
Upvotes: 1
Views: 279
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
Reputation: 1705
As said in here: "Web browsers are sometimes picky about what values they consider valid for attributes."
ng-attr-label="{{yourLabelValue}}"
label can be replaced with any attribute name such as ng-attr-variable-attribute="{{attributeValue}}" for "variable-attribute".
Upvotes: 1