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>' +

    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}}

: enter image description here

Also the directive is placed in ng-form.


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.



All Articles