Oam*_*Psy 68 html javascript angularjs angularjs-scope
我是第一次玩AngularJS,我努力使用ng-include作为我的页眉和页脚.
这是我的树:
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
index.html的:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Test</title>
<script src="/assets/js/vendor/angular.js"></script>
<script src="/assets/js/vendor/route.js"></script>
<script src="/assets/js/vendor/resource.js"></script>
<script src="/assets/js/main.js"></script>
</head>
<body>
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
</body>
</html>
main.js
var app = angular.module("app", ["ngResource", "ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
});
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
});
$routeProvider.otherwise({ redirectTo: '/home'});
});
app.controller("HomeController", function($scope) {
$scope.title = "Home";
});
home.html的
<div>
<p>Welcome to the {{ title }} Page</p>
</div>
当我进入home.html页面时,我的标题,导航和页脚没有出现.
Pie*_*len 145
你正在做一个标题包含.url而不是标题.HTML.看起来你想在src属性中使用文字,所以你应该用引号将它们包装起来,正如@DRiFTy在评论中提到的那样.
更改
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
至
<div ng-include src="'partials/structure/header.html'"></div>
<div ng-include src="'partials/structure/navigation.html'"></div>
<div id="view" ng-view></div>
<div ng-include src="'partials/structure/footer.html'"></div>
如果这不起作用,请检查浏览器控制台是否有404
小智 98
我有一个类似的问题,简单的ng-include不渲染:
<div ng-include="views/footer.html"></div>
我用单引号包装文件路径,它现在呈现:
<div ng-include="'views/footer.html'"></div>
Gra*_*amF 18
我有一个类似的问题让我来到这里.
ng-include 没有填充我的部分内容,但没有控制台错误,也没有404的.
然后我意识到我做了什么.
为我解决:确保你有ng-app外面的ng-include!如此明显 作为Angular noob的价格.
| 归档时间： |
|
| 查看次数： |
94681 次 |
| 最近记录： |