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>
    
    确保目标服务器上允许跨域文件访问。