Angularjs 基于属性值的动态templateUrl

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

{
  "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
    }
  });

//模板
//指示
应用程序指令（'myPanel'，函数（）{
返回{
范围：{
面板：'=面板数据'
},
templateUrl:function（）{
//panel.type（'carousel'或'quote'）确定要加载的模板
}
});

---

我的templateUrl函数应该是什么？

在

模板中移动逻辑：

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

//指令
应用程序指令（'myPanel'，函数（）{
返回{
范围：{
面板：'=面板数据'
},
模板：“”+
'' +
'' +
''
});
您看到$scope对象了吗？$scope.panel？我似乎无法在
模板URL
中访问它
范围
内部
链接（范围、元素、属性）
有，但这对我没有好处在这里使用指令有一个好处，似乎我可以把你的ng开关代码放在我的父模板中？计算机科学中的任何问题都可以通过使用解决。你可以在
链接中做更多的事情
（和
控制器
）函数，如添加模板所需的更多类或计算值（例如，引号中的单词数，或旋转木马中的中等大小图像数）。但是，遵循，除非您确实需要，否则应避免使用。这似乎是一个非常优雅的解决方案（不需要另一个函数来确定使用哪个模板），但它对我不起作用。我得到一个错误：“错误：[$compile:multidir]多个指令[ngSwitchWhen，ngInclude]请求转换”…当ng switch和ng include在同一个元素上不兼容时，似乎ng switch和ng include不兼容。我是否遗漏了什么？有没有办法让这个答案起作用？@Rebecca嗯，是的，解决方案是另一层嵌套。：）当
和
ng include
在同一个元素上时，不要使用
ng开关，而是将
ng include
嵌套在
ng开关内，当
作为另一个div:
。