如何根据属性的值修改 AngularJs 指令模板?

Question

我有一个建立在 Angular Bootstrap typeahead 之上的下拉指令。

我希望指令的使用者能够提供一个属性(限制到列表(，该属性确定用户输入是否仅限于列表成员。 在 uib-typeahead 指令中，这是通过设置 typeahead 可编辑属性"true"或"false"来实现的。

因为我的指令封装了生成下拉列表的 uib，所以我需要更改指令的模板以相应地更改其行为，但我无法弄清楚如何做到这一点。 我试图修改指令的 return 子句中的字符串模板，但这不起作用，我想是因为在处理返回函数之前读取了模板的值？

这是指令：

angular.module("app").directive("dropDown",  function () {
var mt=mydropdowntemplate;
return {
link: function (scope, element, attrs) {
var limitToList = attrs["limit-to-list"]=="false"; 
var editable = !limitToList;
if (editable) {
mt=mt.replace("typeahead-editable='false'","typeahead-editiable='true'");
}
console.log("template: "  + mt )
var list = scope[attrs["list"]];
var length=list.length
var valueName = attrs["value"];
var idName = attrs["key"];       
},
template: mt  //This has the value of mt prior to the replace function above    
}
})

通过查看页面，我可以看到实际使用的模板是在结果块中应用更改之前使用的模板。

普伦克链接

Answer 1

link函数不适合修改模板，因为它是在编译模板后执行的。改用模板属性的函数形式 要修改模板：

angular.module("app").directive("dropDown",  function () {
var mt=mydropdowntemplate;
return {
link: function (scope, element, attrs) {
var list = scope.$eval(attrs.list);
var length=list.length
var valueName = attr.value;
var idName = attrs.key;       
},
template: function (tElem, tAttrs) {
var limitToList = tAttrs.limitToList=="false"; 
var editable = !limitToList;
if (editable) {
mt=mt.replace("typeahead-editable='false'","typeahead-editiable='true'");
}
console.log("template: "  + mt )
return mt;
} 
}
})

有关更多信息，请参阅 AngularJS 综合指令 API 参考 - 模板。

Answer 2

使用返回对象的"scope"属性通过属性传递数据。 像这样，如果你使用控制器作为语法，你可以使用'bindToController'属性。 好吧，我强烈建议使用组件方法来替换指令。