基于属性值的动态templateUrl

Question

假设我有这样的数据，它代表一个由不同面板组成的页面……

{
  "panels": [
    {
      "id": "panel1",
      "type: "carousel",
      // more panel data
    },
    { 
      "id": "panel2",
      "type": "quote",
      // data
    }]}

...and我正在尝试这样做：

// template
<section ng-repeat="panel in panels">
  <my-panel panel-data="{{ panel }}"></div>
</section>

// directive
app.directive('myPanel', function() {
  return {
    scope: {
      panel: '=panelData'
    },
    templateUrl: function() {
       // panel.type ('carousel' or 'quote') determines which template to load
    }
  });

我的templateUrl函数应该是什么？

Answer 1

在template中移动逻辑

// directive
app.directive('myPanel', function() {
  return {
    scope: {
      panel: '=panelData'
    },
    template: '<div ng-switch="panel.type">' +
                  '<div ng-switch-when="carousel" ng-include="carousel.html"></div>' +
                  '<div ng-switch-when="quote"    ng-include="quote.html"></div>' +
              '</div>'
  });