2016-09-21 11 views
-1

私は、他のテンプレートを含むテンプレート(すでに示されています)を含めるようにアプリで試しています。他のテンプレートを含むテンプレートを含めるために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> 

問題(ファイルcalendar_grid-view.html)NG-含む第二のレベルで現れます。ファイルをインクルードするためにブラウザーが行う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がHTMLを表示するためにtruthyにevalutedていることを確認します。

+0

はい、あなたは正しいです。ありがとう –

+0

その場合は、quetitionを終了します。 –

+0

タグの下に近いリンクが見えませんRIYAJ :( –

関連する問題