Question

我正在通过JS加载一个HTML文件，这个文件包含的AngularJS内容并不起作用。

<div ng-app="MyApp.firstElement" ng-controller="ControllerOne" id="firstElement">
   AngularJS content
</div>
<div ng-app="MyApp.secondElement" ng-controller="ControllerTwo">
   AngularJS content
</div>

<script src="loadContent.js"></script>

loadContent.js：

$(document).ready(function() {
   $("#firstElement").load("includedContent.html");
})

includedContent.html：

<md-sidenav>
    <md-content>
     ...
    </md-content>
</md-sidenav>

如您所见，我在每个ng-app都有一个div。角度脚本＆amp; css包含在页面中。但是加载的角度内容不起作用。

我找到的唯一方法是将includedContent.html中的代码直接粘贴到主HTML中：

<div ng-app="MyApp.firstElement" ng-controller="ControllerOne" id="firstElement">
    <md-sidenav>
        <md-content>
         ...
        </md-content>
    </md-sidenav>
</div>
<div ng-app="MyApp.secondElement" ng-controller="ControllerTwo">
   AngularJS content
</div>

<script src="loadContent.js"></script>

Answer 1

这不起作用。

1 /您只需要一个ng-app属性（理想情况下在您的html元素上）

2 /如果你想加载模板，你应该使用指令而不是使用外部.js文件加载它。

3 /尽量不要使用Jquery并坚持使用Angular。当你想使用Jquery

来构建DOM时，使用Angular的重点是什么？

查看https://docs.angularjs.org/guide/directive和https://docs.angularjs.org/guide/bootstrap。

阅读有关指令时，请查看＆＃39;指令定义对象＆＃39;物业template / templateUrl（你可以在哪里获得模板）和编译post funnction（又名链接函数），它允许你与你的元素进行交互，这是一个Jquery对象（或者如果你不喜欢JqLite对象）。在角度之前加载你的Jquery。

Answer 2

无需使用JS加载HTML。 HTML可以使用＆＃34; ng-include =＆＃39; PATH_TO_FILE＆＃39;＆＃34;内置角度指令

<div ng-app="MyApp.firstElement" ng-controller="ControllerOne" id="firstElement" ng-include="'includedContent.html'">
   AngularJS content
</div>

通过JS加载的HTML中的AngularJS内容不起作用

2 个答案: