使用 ng-include 发布渲染 Angular 模板

Question

谁能告诉我为什么 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>

Answer 1

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

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

使用 ng-include 发布渲染 Angular 模板

Issue rendering Angular template using ng-include

javascript

angularjs

angularjs-ng-include