Angular Two Apps在同一页面上

What I am trying to do is render two Calendars on one page, each with a different data set. Currently the first Calendar loads correctly but the second calendar will not load. It doesn't appear to even try to load.

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

I am quite new to Angular, so I am not sure if what I am doing is allowed in the concept of a one page application, or if I should be doing it another way.

我对Angular很新,所以我不确定我在做什么是在一页应用程序的概念中允许,或者我是否应该以另一种方式进行。

Open to all suggestions!

对所有建议开放!

Calendar App Using: https://github.com/mattlewis92/angular-bootstrap-calendar

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

Front end (Trimmed down)

前端(修剪下来)

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

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)
};

2 个解决方案

#1

Well, In here you're using same module UserCal two times. This is your main SPA module so it will be only one time.

好吧,在这里你使用相同的模块UserCal两次。这是您的主要SPA模块,因此它只有一次。

Please put ng-app="UserCal" to html/body tag and remove <div ng-app="UserCal" class="textfix"> from HTML code.

请将ng-app =“UserCal”放入html / body标签,并从HTML代码中删除

。

Now both the calender will work :)

现在这两个日历都可以工作:)

cheers!

#2

Its because you are using ng-app twice, you have to declare it only once on top of the page or best thing is declare it in ur index.html on html tag

因为你使用ng-app两次,你必须在页面顶部只声明一次,或者最好的事情就是在html标签上的index.html中声明它

On index.html:

<html ng-app="UserCal">

On current page:

在当前页面上:

<div ng-app="UserCal">

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

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

</div>

#1