Question

我有一个列表组件和项目组件。 list组件从服务器获取数据，并使用item组件呈现每个数据。我使用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。$ on ... etc;）一样，您需要更新范围：

$scope.$apply();

组件属性更改未在UI中反映

1 个答案: