Question

我必须根据发送的布局动态地重新定义模板（现在我们有原始和替代）。

在开始时，我在html中手动搜索。像这样：

<component layout="original"></component>

组件模板：

template: ($element, $attrs) => {
    let process = 'original';
    if ($attrs.layout) {
      process = $attrs.layout;
    }
    return require(`./templates/${process}.html`);
  }

但是现在我必须根据变量进行编译。例如：

<component layout="{{vm.templateType}}"></component>

但当我访问$attrs template时，Angular未编译，结果就是这样的字符串："{{vm.templateType}}"。

有一种方法可以在运行模板函数之前强制进行模板编译吗？

Answer 1

这是AngularJS中的问题，您可以在此处查看讨论：#2895和#13526。

要解决这个问题，我必须在控制器中使用$compile，如下所示：

this.$onChanges = function (obj) {
  const layout = require(`./templates/${obj.layout.currentValue}.html`);
  $element.append($compile(layout)($scope));
};

删除组件的模板attr。

AngularJS绑定模板变量

1 个答案: