Angularjs 如何动态加载角度JS指令/模板

我想动态加载angular js指令

考虑到我有3条指令

<apple data="data"/>

apple.html将为苹果的用户界面提供服务

<banana data="data"/>

banana.html将为banana提供用户界面

<mango data="data"/>

mango.html将为mango指令提供用户界面

我想根据我的JSON数据加载其中一个指令

数据：{果型：“苹果”：果型：{…}

在UI层上

我们有一个JSP，它将实际保存水果角标记（即

，

或

）

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

通常，对于静态jsp，我们只需编写如下内容

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

</div>

---

您可以在指令范围中定义函数，以获取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>',


  }


})

app.directive（“fruit”，function（））{
返回{
范围：{
数据：'=数据'，
果型：“@type”
},
链接：函数（范围、元素、属性）{
scope.getTemplate=函数（）{
//通往你的圣殿之路
返回scope.fruitType+'.html'；
}
},
模板：“”，
}
})

---

完整的工作演示您可以在这里找到

关于条件JSP呢？这不现实，因为我们在系统中要支持大约70个结果：）然后帮助服务器函数根据类型呈现必要的标记。我不确定什么是“帮助服务器函数”。可以吗。请详细说明或向我介绍一些文档？这些不同的FROUT指令是否需要具有不同的链接函数/控制器代码？或者它们之间唯一不同的是标记的内容吗？这正是我想要的！非常感谢你！！