Angular use ng-include to include a template that include others

Question

i'm trying in my app to include a template (already shown) that include other template.

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>

Problem appear on the second level of ng-include (file calendar_grid-view.html). No one xhr call is done by browser to include the file.

What's wrong?

Answer 1

You are missing single quote.

 <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>

Make sure view.mode.list and view.mode.grid evaluted to truthy in order to display html.

Angular use ng-include to include a template that include others

Question

index.html

calendar_main-view.html

1 answers

solution1
0 2016-09-21 18:08:20

Angular use ng-include to include a template that include others

Question

index.html

calendar_main-view.html

1 answers

solution1 0 2016-09-21 18:08:20

solution1
0 2016-09-21 18:08:20