在加载的 html 页面中使用 angular 脚本（通过 ajax）答案

【问题标题】：using angular script in loaded html page ( by ajax )在加载的 html 页面中使用 angular 脚本（通过 ajax）
【发布时间】：2016-05-18 18:47:46
【问题描述】：

我有两个 HTML 页面，其中包括 Jquery + Angularjs + 一些脚本。当我的第一个 html 加载时，jquery 脚本将通过 ajax 加载其他 html 页面，第二个 html 页面包含一些不再工作的 angular 脚本。

有什么解决办法吗？就算需要改ajax的脚本也没问题

检查这个project

【问题讨论】：

Jquery + Angularjs + 一些脚本....根本没有帮助。贴出相应的代码 sn-ps。
plnkr.co/edit/nh8vaqCPX3IIBl7TcWku

标签： jquery html angularjs ajax

【解决方案1】：

正如你给出的描述，我只能建议你这些东西-

当您加载第一个 html 页面时，您必须在其中加载 Angular 脚本。

因为第二个 html 页面是由脚本加载的，所以第二个 html 页面此时不会加载 angular 脚本。

您可以添加一个 .js 文件，其中将包含脚本代码，并且该 js 文件将包含在第一个 html 页面中。

【讨论】：

【解决方案2】：

你可以试试下面的方法

将控制器移至index.html

在index.html的body标签中添加app声明

<body ng-app="myApp">

在body标签内包含对other.html的引用

 <div ng-include="'other.html'"></div>

在 other.html 中只需要以下代码

<div ng-controller="myCtrl">
    Number {{yourName}}!
</div>

Plunker Demo

【讨论】：

我希望每个外部页面都有它的脚本，如果我使用你建议的方式，第一页将加载许多用户可能不需要的脚本

【解决方案3】：

终于找到我想要的了

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http, $sce) {
    $http.get("page2.html").then(function (response) {
       $scope.myText = $sce.trustAsHtml(response.data);
    });
});
</script>
</body>
</html>

【讨论】：