MrFoh MrFoh - 2 months ago 14
AngularJS Question

Component property changes not reflecting in UI

I have a list component and item component. The list component fetches data from a server and uses the item component to render each piece of data.
Am using firebase to push data changes from server to client.

This is the list component

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


and the item component

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


The list component html

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


The item component html

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


When the 'child_changed' event is triggered and the item data is merge with data from firebase, the view doesn't update.

gyc gyc
Answer

You're changing scope data inside an event which is outside of angular's context.

Like with any event ($scope.$on...etc;) you need to update the scope:

$scope.$apply();