ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

HoRain云--AngularJS 包含

HoRain云--AngularJS 包含 在 AngularJS 中你可以在 HTML 中包含 HTML 文件。在 HTML 中包含 HTML 文件在 HTML 中目前还不支持包含 HTML 文件的功能。服务端包含大多服务端脚本都支持包含文件功能 (SSI Server Side Includes)。使用 SSI, 你可在 HTML 中包含 HTML 文件并发送到客户端浏览器。PHP 实例?php require(navigation.php); ?客户端包含通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。通常我们使用 http 请求 (AJAX) 从服务端获取数据返回的数据我们可以通过 使用innerHTML写入到 HTML 元素中。AngularJS 包含使用 AngularJS, 你可以使用ng-include指令来包含 HTML 内容:实例body ng-app div ng-includerunoob.htm/div /body尝试一下 »步骤如下runoob.htm 文件代码h1菜鸟教程/h1 p这是一个被包含的 HTML 页面使用 ng-include 指令来实现/p包含 AngularJS 代码ng-include 指令除了可以包含 HTML 文件外还可以包含 AngularJS 代码:sites.htm 文件代码table tr ng-repeatx in names td{{ x.Name }}/td td{{ x.Url }}/td /tr /table包含的文件 sites.php 中有 AngularJS 代码它将被正常执行实例div ng-appmyApp ng-controllersitesCtrl div ng-includesites.htm/div /div script var app angular.module(myApp, []); app.controller(sitesCtrl, function($scope, $http) { $http.get(sites.php).then(function (response) { $scope.names response.data.records; }); }); /script跨域包含默认情况下 ng-include 指令不允许包含其他域名的文件。如果你需要包含其他域名的文件你需要设置域名访问白名单sites.htm 文件代码body ng-appmyApp div ng-includehttps://c.runoob.com/runoobtest/angular_include.php/div script var app angular.module(myApp, []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ https://c.runoob.com/runoobtest/** ]); }); /script /body此外你还需要设置服务端允许跨域访问设置方法可参考PHP Ajax 跨域问题最佳解决方案。angular_include.php 文件代码?php // 允许所有域名可以访问 header(Access-Control-Allow-Origin:*); echo b stylecolor:red我是跨域的内容/b; ?
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进