如何根据属性的值修改 AngularJs 指令模板？答案

【问题标题】：How to modify an AngularJs directive template based on the value of attribute?如何根据属性的值修改 AngularJs 指令模板？
【发布时间】：2019-03-21 13:32:12
【问题描述】：

我有一个基于 Angular Bootstrap typeahead 构建的下拉指令。

我希望指令的使用者能够提供一个属性（限制到列表），该属性确定用户输入是否仅限于列表成员。在 uib-typeahead 指令中，这是通过将 typeahead-editable 属性设置为“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    
  }
})

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

Plunker link

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案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 Comprehensive Directive API Reference - template。

【讨论】：

【解决方案2】：

使用返回对象的“范围”属性通过属性传递数据。像这样，如果您使用 controllerAs 语法，您可以使用“bindToController”属性。好吧，我强烈建议在替换指令中使用组件方法。

【讨论】：