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

: enter image description here

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







All Articles