Angularjs isolated scoped directive does not parse variable in template
I have a directive:
angular.module('spApp.directives').directive("clickToEditPlain", function() {
var editorTemplate = '<div class="click-to-edit">' +
'<div ng-hide="view.editorEnabled">' +
'{{value}} ' +
'<a ng-click="enableEditor()">Edit</a>' +
'</div>' +
'<div ng-show="view.editorEnabled">' +
'<input id="{{inputId}}" type="text" name="{{inputName}}" ng - model="view.editableValue" >' +
'<a href="#" ng-click="save()">Save</a>' +
' or ' +
'<a ng-click="disableEditor()">cancel</a>.' +
'</div>' +
'</div>';
return {
restrict: "A",
replace: true,
template: editorTemplate,
scope: {
value: "=clickToEditPlain",
ngModel: "=",
inputName: "@",
inputId: "@"
},
controller: function($scope) {
}
};
});
Works as expected. The page parses the html well where I can properly evaluate inputId
and inputName
:
<input id="inputId-52" type="text" name="inputName-52" ng-model="view.editableValue">
But when I check the structure in the debugger, I see that the name inputName
is evaluated to {{inputName}}
:
Also the directive is placed in ng-form.
+3
source to share
1 answer
You can do something like this in your directive template:
template: function(elem, attrs) {
return '<input type="text" name="' + attrs.class+ '">'
}
And in HTML:
<div class="yourInputName" click-to-edit-plain></div>
Finally, this is no longer a problem in newer versions of Angular.
0
source to share