angularjs - 将对象数组绑定到 AngularJs 组件

Question

我有一个内部带有 ui-gid 的组件，我想将数据传递给网格。数据来自对 Web Api 的 $http 调用。数据从服务器到达时不显示 - 组件内的网格​​为空。问题是绑定发生在“早期”，在数据从服务器到达之前。将对象数组绑定到组件的正确方法是什么？

这是我的组件部分：

.component('gridComponent', {
        bindings: {
            gridData: '<',
            gridSelected: '<?', //selected objects to set
            gridColumns: '<?',
            gridOnchange: '&',
        },
        templateUrl: 'Angular/common/components/grid-component/grid.component.html',
        controller: GridComponentController
    });

ctrl.$onInit = function () {
        if (angular.isDefined(ctrl.gridColumns))
            ctrl.grid.columnDefs = ctrl.gridColumns;
        ctrl.grid.data = ctrl.gridData;

    };

html:

<grid-component  grid-data="vm.shops" grid-columns="vm.shopsColumns" grid-selected="vm.selectedShops"
                          grid-onchange="vm.changeSelected(selected, isChecked)"></grid-component>

我也尝试进行双向绑定，但没有运气。它起作用的唯一方法是当我将 ng-if=vm.shops.length>0 放入包装此组件的某个 div 中，但我认为这不是一个好的解决方案。