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

【问题标题】：angularjs directive with isolated scope doesn't parse variable in template具有隔离范围的 angularjs 指令不解析模板中的变量
【发布时间】：2015-10-22 02:13:49
【问题描述】：

我有一个指令：

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 中的指令。

【问题讨论】：

这可能是由于模型控制器的生成不支持插值。使用此名称创建模型控制器 {{inputName}}

标签： javascript html angularjs

【解决方案1】：

你可以在你的指令模板中做这样的事情：

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

在 HTML 中：

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

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

【讨论】：