使用ng-include渲染Angular模板时出现问题

Issue rendering Angular template using ng-include

本文关键字：问题 ng-include 渲染 Angular 使用      更新时间：2023-09-26

有人能告诉我为什么我在htmlpage1.html中的模板没有呈现吗？

main.js:中的代码

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});

htmlpage1.html:

<div>this is my template</div>

index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
    <div data-ng-include data-ng-src="'HtmlPage1.html'"></div>
</body>
</html>

确保在index.html中提供的文件名和模板名称相同（区分大小写）->将html文件重命名为HtmlPage1.html。你可以在数据ng-include中设置模板文件，比如<div data-ng-include="'HtmlPage1.html'"></div>

下面是一个工作示例：http://jsbin.com/casoza/1/edit

相关文章：