动态templateUrl基于属性值

Question

假设我有这些数据代表由不同面板组成的页面......

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

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

// 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>'
  });