Angular use ng-include包括包含其他模板的模板

时间：2016-09-21 17:57:50

标签： javascript html angularjs angularjs-ng-include

我在我的应用中尝试添加包含其他模板的模板（已显示）。

的index.html

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tasks Overview</title>

    <!-- Angular framework -->
    <script src="assets/js/angular.min.js"></script>

    <!-- Main module -->
    <script src="app.js"></script>

    <!-- Components -->

    <!-- Services -->
    <script src="app/components/logger/logger-service.js"></script>
    <script src="app/components/resource/resource-service.js"></script>
    <script src="app/components/integrity_check/integrity_check-service.js"></script>
    <script src="app/components/date_utilities/month_translation_utility-service.js"></script>

    <!-- History -->
    <script src="app/components/history/history-controller.js"></script>

    <!-- Period -->
    <script src="app/components/period/period-controller.js"></script>
    <script src="app/components/period/directives/year_picker/year_picker-directive.js"></script>
    <script src="app/components/period/directives/month_picker/month_picker-directive.js"></script>

    <!-- Shell -->
    <script src="app/components/shell/shell-controller.js"></script>

    <!-- Calendar -->
    <script src="app/components/calendar/directives/day/day-directive.js"></script>
    <script src="app/components/calendar/calendar-controller.js"></script>

    <!-- UI libraries -->
    <link rel="stylesheet" type="text/css" href="assets/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/system.css">
    <script src="assets/js/jquery-3.1.0.min.js"></script>
    <script src="assets/js/materialize.min.js"></script>

    <!-- Task entities -->
    <script src="app/components/task/task-controller.js"></script>
    <script src="app/components/task/tasks-service.js"></script>

    <!-- Main -->
    <script src="app/components/main/main-controller.js"></script>

    <!-- Google material icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

    <!-- External libraries -->
    <script src="assets/js/FileSystem.js"></script>

</head>
<body ng-app="wtd">

    <!--History component-->
    <div id="history" ng-include="'app/components/history/history_main-view.html'" ng-controller="historyController as vm"></div>

    <!--Period component-->
    <div id="period" ng-include="'app/components/period/period_main-view.html'" ng-controller="periodController as vm"></div>

    <!--Calendar component-->
    <div id="calendar" ng-include="'app/components/calendar/calendar_main-view.html'" ng-controller="calendarController as vm"></div>

    <!--Shell component-->
    <div id="shell" ng-include="'app/components/shell/shell_main-view.html'" ng-controller="shellController as vm"></div>

    <!--Main controller-->
    <div id="main" ng-controller="mainController"></div>

</body>
</html>

calendar_main-view.html

    <div class="col l10 offset-l1 m10 offset-m1 s10 offset-s1">

<!-- List view mode -->
<div ng-if="view.mode.list" ng-include="app/components/calendar/calendar_list-view.html">

</div>

<!-- Grid view mode -->
<div ng-if="view.mode.grid" ng-include="app/components/calendar/calendar_grid-view.html"></div>

</div>

问题出现在ng-include的第二级（文件calendar_grid-view.html）。浏览器没有一个xhr调用来包含该文件。

出了什么问题？

1 个答案:

答案 0 :(得分：0)

你缺少单引号。

 <div ng-if="view.mode.list" ng-include="'app/components/calendar/calendar_list-view.html'">

<div ng-if="view.mode.grid" ng-include="'app/components/calendar/calendar_grid-view.html'"></div>

确保view.mode.list和view.mode.grid评估为真实，以便显示html。