如何动态加载Angular JS directives/templates

Question

我想动态加载 angular js 指令。

假设我有 3 个指令

<apple data="data"/>

apple.html 将为苹果

提供 UI

<banana data="data"/>

banana.html 将供应 UI 香蕉

<mango data="data"/>

mango.html 将为 UI 提供芒果指令

我想根据我的 JSON 数据加载这些指令之一

数据：{ fruittype："apple"：fruitObj：{“...”}}

在UI层

我们有一个 JSP，它实际上会包含水果 angular 标签（即 <apple> 、 <banana> 或 <mango> ）

我的问题是在 JSP 逻辑中写什么？

通常使用静态 jsp 我们只写如下内容；

<div ng-app="fruitApp">
<apple></apple>

</div>

Answer 1

您可以在指令范围内定义函数以获取 templateUrl 并将模板包含到指令模板中，如下所示：

app.directive("fruit", function() {

  return {
    scope: {

      data: '=data',
      fruitType: '@type'

    },
    link: function(scope, element, attrs) {
      scope.getTemplate = function() {

        //path to yours templetes
        return scope.fruitType + '.html';
      }
    },
    template: '<div ng-include="getTemplate()"></div>',


  }


})

您可以在此处找到完整的工作演示 http://plnkr.co/edit/VC6NfnYpcKFyhwgOot38?p=preview

如何动态加载Angular JS directives/templates

How to load Angular JS directives/templates dynamically

jsp

dynamic

angularjs

angularjs-directive