具有隔离范围的angularjs指令不解析模板中的变量

Question

我有一个指令：

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) {
        }
    };
});

它按预期工作。页面上有很好的解析html，我可以看到正确评估inputId和inputName：

<input id="inputId-52" type="text" name="inputName-52" ng-model="view.editableValue">

但是当我在调试器中检查一个结构时，我看到在inputName中评估了该名称{{inputName}}：

该指令也以ng-form。

Answer 1

您可以在指令模板中执行以下操作：

template: function(elem, attrs) {
  return '<input type="text" name="' + attrs.class+ '">'
}

在HTML中：

<div class="yourInputName" click-to-edit-plain></div>

最后，在较新的Angular版本中，这不再是一个问题。