在同一页上的角度两个应用程序

我想要做的是在一个页面上呈现两个日历，每个日历都具有不同的数据集。目前第一个日历正确加载，但第二个日历不会加载。它似乎甚至没有尝试加载。在同一页上的角度两个应用程序

对于Angular来说，我是一个新手，所以我不确定我在做什么在单页应用程序的概念中是允许的，或者我应该以另一种方式做。

向所有建议开放！

日历应用使用：https://github.com/mattlewis92/angular-bootstrap-calendar

前端（下调）

<div class="col-lg-9 panel panel-default" id="Calandars"> 
<button class="btn dropdown" data-toggle="collapse" data-target="#userCal" data-parent="#Calandars"><i class="icon-chevron-right"></i> User Calandar </button> 
<button class="btn dropdown" data-toggle="collapse" data-target="#GlobalCal" data-parent="#Calandars"><i class="icon-chevron-right"></i> Global Calandar</button> 
<div class="accordion-group"> 
<div id="userCal" class="collapse indent"> 

    <!---User Calendar Configuration - Working Calendar--> 
    <div ng-app="UserCal" class="textfix"> 
    <div ng-controller="Cal as vm"> 
     <h2 class="text-center">{{ vm.calendarTitle }}</h2> 
     <mwl-calendar events="vm.events" 
        view="vm.calendarView" 
        view-title="vm.calendarTitle" 
        view-date="vm.viewDate" 
        on-event-click="vm.eventClicked(calendarEvent)" 
        on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" 
        edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'" 
        delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'" 
        on-edit-event-click="vm.eventEdited(calendarEvent)" 
        on-delete-event-click="vm.eventDeleted(calendarEvent)" 
        cell-is-open="vm.isCellOpen" 
        day-view-start="06:00" 
        day-view-end="22:00" 
        day-view-split="30" 
        cell-modifier="vm.modifyCell(calendarCell)"> 
     </mwl-calendar> 
    </div> 
    </div> 
</div> 

<div id="GlobalCal" class="collapse indent"> 
    <!---Global Calandar Configuration -- None Working Calendar--> 

    <div ng-app="UserCal" class="textfix"> 
     <div ng-controller="GlobalCalCon as vm"> 
     <h2 class="text-center">{{ vm.calendarTitle }}</h2> 
     <mwl-calendar events="vm.events" 
         view="vm.calendarView" 
         view-title="vm.calendarTitle" 
         view-date="vm.viewDate" 
         on-event-click="vm.eventClicked(calendarEvent)" 
         on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" 
         edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'" 
         delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'" 
         on-edit-event-click="vm.eventEdited(calendarEvent)" 
         on-delete-event-click="vm.eventDeleted(calendarEvent)" 
         cell-is-open="vm.isCellOpen" 
         day-view-start="06:00" 
         day-view-end="22:00" 
         day-view-split="30" 
         cell-modifier="vm.modifyCell(calendarCell)"> 
     </mwl-calendar> 
     </div> 
    </div>  
    </div>

的Javascript

背后

angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate']) 
.controller('Cal', populateCal) 
.controller('GlobalCalCon', populateGlobalCal); 

function populateCal($http) { 
    Do Stuff 
    angular.copy(MyData, vm.events) 
}; 

function populateGlobalCal($http) { 
    Do Diffrent Stuff 
    angular.copy(MyData, vm.events) 
};

来源

2016-07-06 Caz1224

你只有一个应用程序...在其中任何数量的控制器/指令等 – charlietfl

那么，在这里你使用相同的模块UserCal两次。这是您的主要SPA模块，因此只有一次。

请将ng-app="UserCal"改为html/body标记，并从HTML代码中删除<div ng-app="UserCal" class="textfix">。

现在这两个压延机将工作:)

干杯！

来源

2016-07-06 03:03:14 varit05

它，因为你正在使用NG-应用两次，你必须在页面的顶部或最好的事情只有一次宣布它宣布它在乌拉圭回合上index.html的HTML标记

上的index.html：

<html ng-app="UserCal">

或者

在当前页：

<div ng-app="UserCal"> 

    <div ng-controller="Ctrl1"> 
      // stuff goes herr 
    </div> 

    <div ng-controller="Ctrl1"> 
      // stuff goes herr 
    </div> 

</div>

来源

2016-07-06 03:12:32 Wcan

在同一页上的角度两个应用程序

回答

相关问题