2016-09-21 86 views
-1

我在我的应用中试图包含一个包含其他模板的模板(已经显示)。Angular使用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-包括(文件calendar_grid-view.html)。没有人通过浏览器进行xhr调用以包含文件。

怎么了?

回答

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.listview.mode.grid evaluted以显示HTML到truthy。

+0

是的,你是对的RIYAJ。谢谢 –

+0

如果它的工作,然后关闭quetition。 –

+0

我无法看到标签下的紧密链接RIYAJ :( –