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

时间:2015-03-25 16:51:00

标签: javascript angularjs angularjs-ng-include

任何人都可以告诉我为什么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>

1 个答案:

答案 0 :(得分:2)

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

这是一个有效的例子: http://jsbin.com/casoza/1/edit