Question

我想动态加载angular js指令。

考虑我有3个指令

<apple data="data"/>

apple.html将为苹果的UI提供服务

<banana data="data"/>

banana.html将为香蕉提供UI

<mango data="data"/>

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

我想根据 JSON数据

加载其中一个指令

数据：{fruittype：＆＃34; apple＆＃34;：fruitObj：{＆＃34; ...＆＃34;}}

在 UI图层

上

我们有一个实际上会持有水果角标签的JSP（即<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指令/模板

1 个答案: