AngularJS 包含 - 蝴蝶教程

定义和用法

使用 AngularJS，您可以包含来自外部文件的HTML。

使用 AngularJS，您可以使用 ng-include 指令包含HTML内容：

<body ng-app="">
    <div ng-include="'myFile.html'"></div>
</body>

包含 AngularJS 代码

包含在 ng-include 指令中的HTML文件也可以包含AngularJS代码：

创建 myTable.html 代码:

<table>
    <tr ng-repeat="x in names">
      <td>{{ x.Name }}</td>
      <td>{{ x.Country }}</td>
    </tr>
</table>

在您的网页中包含文件 "myTable.html"，将执行所有AngularJS代码，甚至包括该文件中的代码：

<div ng-app="myApp" ng-controller="customersCtrl">
    <div ng-include="'myTable.htm'"></div>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("customers.php").then(function (response) {
           $scope.names = response.data.records;
        });
    });
</script>

包括跨域

默认情况下，ng-include 指令不允许您包含来自其他域的文件。

要包括来自另一个域的文件，您可以在应用程序的config函数中添加合法文件和/或域的白名单：

<body ng-app="myApp">
    <div ng-include="''https://includestdio.com/other/angularjs_inc.php'"></div>
    <script>
    var app = angular.module('myApp', [])
    app.config(function($sceDelegateProvider) {
        $sceDelegateProvider.resourceUrlWhitelist([
            'https://includestdio.com/**'
        ]);
    });
    </script>
</body>

确保目标服务器上允许跨域文件访问。