UI에 반영되지 않은 구성 요소 속성 변경

Question

목록 구성 요소와 항목 구성 요소가 있습니다. 목록 구성 요소는 서버에서 데이터를 가져 와서 항목 구성 요소를 사용하여 각 데이터를 렌더링합니다. firebase를 사용하여 서버에서 클라이언트로 데이터 변경을 푸시하고 있습니다.

이

목록 성분

angular.module('app') 
    .component('orderList', { 
    templateUrl: 'templates/orders/list.html', 
    controller: function($rootScope, $scope, $element, $attrs, loading, popup, toast, orders) { 
     var vm = this; 

     vm.orders = []; 

     vm.$onInit = function() { 
     orders.all(). 
     then(function(data) { 
      vm.orders = data; 
     }) 

     firebase.database().ref('/orders/10'). 
     on('child_changed', function(snapshot) { 
      var order = vm.orders.filter(function(o) { return 0.id == snapshot.key })[0]; 
      if(order) { 
      var index = vm.orders.indexOf(order); 
      _.merge(vm.orders[index], snapshot.val()); 
      } 
     }) 
     } 
    } 
    }) 

상기 항목 성분

angular.module('app') 
    .component('orderItem', { 
    templateUrl: 'templates/orders/item.html', 
    bindings: { 
     item: '<' 
    }, 
    controller: function($rootScope, $scope, $element, $attrs) { 
     var vm = this; 
    } 
    }) 

목록 성분 HTML이다

<order-item ng-repeat="order in $ctrl.orders" item="order"></order-item> 

항목 성분 HTML

<div class="item-image"><img src="img/drawer-header-bg.png"></div> 
<div class="item-status">{{ $ctrl.item.status }}</div> 

'child_changed'이벤트가 트리거되고 항목 데이터가 firebase의 데이터와 병합되면보기가 업데이트되지 않습니다.

Answer 1

각도의 컨텍스트 외부에있는 이벤트에서 범위 데이터를 변경하고 있습니다. 어떤 경우와 마찬가지로

, 당신은 범위를 업데이트해야합니다 ($ 범위 $에 ... 등.) :

$scope.$apply();