AngularJS指令templateUrl函数使用2路数据绑定[重复]

Question

我尝试使用指令参数化页面模板。 我有一个具有“类型”值的对象数组。当类型不同时，我想使用不同的模板。

这是我尝试过的：

directive.js

angular.module('core')
  .directive('mySolutionDisplay', function () {
    return {
      restrict: 'E',
      scope: {
        solution: '='
      },
      templateUrl: function (elem, attr) {
        return 'path/to/template/solution-'+attr.type+'.template.html';
      }
    };
  });

view.html

<div class="row">
  <my-solution-display type="vm.solution[0].type" solution="vm.solution"></my-solution-display>
</div>

我收到以下错误： angular.js:11706 Error: [$compile:tpload] Failed to load template: path/to/template/solution-vm.solution[0].type.template.html

我尝试将type="vm.solution[0].type" 替换为type="{{vm.solution[0].type}}"，但它只是在错误消息中添加了大括号。

Answer 1

属性（attrs）无法访问范围变量。它们被插值后得到 dom 值。

所以，使用

<my-solution-display type="{{vm.solution[0].type}}" solution="vm.solution"> </my-solution-display>

注意type="vm.solution[0].type" 是如何更改为type="{{vm.solution[0].type}}"