如何通过从外部JSON文件AngularJS获取路径来动态加载HTML模板

Question

我面临的问题是加载包含一些描述的动态HTML模板。我拥有的基本要求是，当我单击特定按钮时，它应该加载相应的HTML文件。通过从JSON文件中获取路径。 我正在共享我的代码，并且可以阅读和显示JSON的URL，但我无法显示该HTML页面的内容

＃index.html

 <div>
{{descriptionUrl}}
<div ng-include="'./api-data/{{descriptionUrl}}'"></div>
</div>

action.json

{
  "Product": [{
      "descriptionUrl":"view.html"
    },
    {
      "descriptionUrl":"add.html"
    }
  ]
}
 #view.html
<h1>view</h1>
 #add.html
<h1>add</h1>

Answer 1

首先，ng include对当前范围评估您的表达。因此，如果要使用固定路径，则需要使用引号使其成为字符串的字面文字。第一个有效路径是

ng-include="'fixed_path'"

如果要动态加载路径，则可以创建像这样的路径

ng-include="'partial_path_1' + any_value_in_scope + 'again_fixed_path.html'"

或，如果要使您的代码更易于管理，则可以简单地放置

ng-include="returnPathFromScope()"

回答您的问题，

ng-include="'/api-data/' + descriptionUrl"

Answer 2

对于您的动态行为，使用ng include与src一起使用。

 <ng-include src="{{your url}}"></ng-include>

参考：https://docs.angularjs.org/api/ng/directive/nginclude