2015-02-23 37 views
0

我有这个指令“检查室”:如何从指令内更新所有的模板

.directive('checkRoom',['$rootScope','CalendarService','ModalService','BookingsService','$q','$state', function($rootScope,CalendarService,ModalService,BookingsService,$q,$state){ 
     return { 
      restrict: 'A', 
      replace: 'true', 
      scope: {}, 
      templateUrl: 'templates/calendarWeekDay.html', 
      link: function (scope, elem, attrs) { 

       scope.boxData= $rootScope.arrayDaysInYear[attrs.calendarday][1][attrs.roomname]; 

       scope.saveBooking=function(){ 

        CalendarService.Update(scope.boxData).then(function(){ 

         CalendarService.Get().then(function(data){ 

          function buildBoxData(){ 

          var deferred = $q.defer(); 

          deferred.resolve(BookingsService.YearBookingCalendar(data)); 

          return deferred.promise 

          } 

          buildBoxData().then(function(value){ 

          $rootScope.arrayDaysInYear = value; 

          scope.boxData = $rootScope.arrayDaysInYear[attrs.calendarday][1][attrs.roomname]; 

          $state.reload(); 

          scope.closeModal(); 

          }) 
         }) 
        }) 
       } 

       function modalBookingDetail() { 
        ModalService 
         .init('templates/modalBookingDetail.html',scope) 
         .then(function(modal) { 
          modal.show(); 
         }); 
       } 

       scope.checkDetails=function(){    
        modalBookingDetail(); 

       }; 
      }  
     }  
}]); 

叫我的主要观点几次:

<table class="bordered"> 
    <tbody> 
    </tr> 
     <td check-Room class="outer-border-room" calendarDay={{day[5]}} roomName="Pantheon"> 
     </td> 
     </tr> 
     <tr> 
     <td check-Room class="outer-border-room" calendarDay={{day[5]}} roomName="Colosseo"> 
     </td> 
     </tr> 
     <tr> 
     <td check-Room class="outer-border-room" calendarDay={{day[5]}} roomName="Trevi"> 
     </td> 
     </tr> 
     <tr> 
     <td check-Room class="outer-border-room" calendarDay={{day[5]}} roomName="Navona"> 
     </td> 
     </tr> 
    </tbody> 
    </table> 

拔模态窗口之后与scope.checkDetail()我可以插入一些数据和scope.saveBooking()我异步更新数据库。 现在我希望能够重新加载不仅所选的指令模板,而且所有其他模板都基于相同的指令。 看起来像“$ rootScope.arrayDaysInYear = value”和$ state.reload()不起作用。

+0

我找到了一个解决方案通过'$ state.go($ state.current.name,{},{重装:真})代替'$ state.reload()''但是我不要认为这是更新UI的正确方法。 – Cris69 2015-02-25 13:34:08

回答

0

您可以在数据准备好时使用$rootScope.$boradcast发送活动,并使用$scope.$on从您的所有指令中接收活动。

documentation

+0

只有一个被称为几次的指令。我需要更新所有模板。现在只有当我手动刷新浏览器页面时,我才能看到数据更新。 – Cris69 2015-02-24 00:04:17