Изменения свойств компонента не отражаются в пользовательском интерфейсе

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