AngularJS Include指令用法详细介绍

HTML不支持在html中嵌入html页面, 这就是我们使用AngularJS Include指令的原因。通过使用ng-controller指令, 我们可以轻松地完成任务。
语法如下：

< element ng-include=" "> content...< element>

例子：

< !DOCTYPE html> < html> < head> < script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < /script> < title> ng-include directives< /title> < /head> < body ng-app= "" > < center> < h1 style= "color:green; " > lsbin< /h1> < div ng-include= "'geeks.html'" > < /div> < /center> < /body> < /html>

输出如下：

文章图片
包括AngularJS代码：
与以前的情况类似, 你可以使用ng-include包含html文件, 类似地, 它可以包含AngularJS代码。
例子：
lsbin.html表：

< table > < tr ng-repeat = "x in courses" > < td > {{ x.Course }}< / td > < td > {{ x.Duration }}< / td > < / tr > < / table >

代码如下：

< !DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < / head > < body > < div ng-app = "geeks" ng-controller = "customersCtrl" > < div ng-include = "'Geekstable.html'" > < / div > < / div > < script > var app = angular.module('geeks', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers.php").then(function (response) { $scope.courses = response.data.records; }); }); < / script > < / body > < / html >

输出如下：

文章图片
包括跨域：
如果要包括来自其他域的文件, 则可以在应用程序的config功能中添加合法文件或域的白名单。
【AngularJS Include指令用法详细介绍】样例代码：

< !DOCTYPE html> < html > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < body ng-app = "myApp" > < div ng-include = "'filel_path_from_anotherDomain'" > < / div > < script > var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist(['filel_path_from_anotherDomain']); }); < / script > < / body > < / html >