问题描述

我第一次使用 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 页面上，我的标题，导航和页脚没有出现。

最佳解决方案

你正在做一个 header.url 而不是 header.html 。看起来你想在 src 属性中使用文字，所以你应该用引号括起来，如 @DiscGolfer 的注释所述。

更改

 <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

次佳解决方案

我有一个类似的问题，一个简单的 ng-include 不渲染：

<div ng-include="views/footer.html"></div>

我用单引号包装文件路径，现在渲染：

<div ng-include="'views/footer.html'"></div>

第三种解决方案

我有一个类似的问题，让我在这里。

ng-include 没有填充我的部分内容，但没有控制台错误，也没有 404 的。

然后我意识到我做了什么

修复我：确保您在 ng-include 之外有 ng-app！很明显作为角色的价格。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。