Question

我尝试使用指令参数化页面模板。我有一个带有'type'值的对象数组。我希望在类型不同时使用不同的模板。

以下是我的尝试：

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}}"

AngularJS指令templateUrl函数使用双向数据绑定

1 个答案: