AngularJS 包含详解及示例-慕源网

AngularJS 包含，HTML不支持在HTML中嵌入HTML页面，这就是我们使用AngularJS ng-include指令的原因。通过使用NG-Controller指令，我们可以轻松在 AngularJS 的 HTML 中包含 HTML 文件。

语法：

<element ng-include=" ">内容...<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;">GeeksforGeeks</h1>
		<div ng-include="'geeks.html'"></div>
	</center>
</body>
</html>

输出：

包含 AngularJS 代码：

ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码:

例子：

GeeksforGeeks.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>

输出：

包含跨域：

如果您想包含来自另一个域的文件，则可以在应用程序的配置功能中添加合法文件或域的白名单。

示例代码：

<!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>

AngularJS 包含详解及示例

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复