angularjs孤立范围指令并不解析变量模板

我有一个指令：angularjs孤立范围指令并不解析变量模板

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}}评价： enter image description here

，且方向以ng形式放置。

来源

2014-09-25 Alex Po

这可能是由于内插不支持生成模型控制器。模型控制器使用这个名称'{{inputName}}'创建 – Chandermani 2014-09-25 11:47:29

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

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

而在HTML：

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

最后，这是在新版本角不再有问题。

来源

2015-10-21 18:13:49 Mariano

angularjs孤立范围指令并不解析变量模板

回答

相关问题