передать параметр угловому компоненту после запроса ajax

Question

Я имею дело с угловым 1 компонентом, я сделал компонент данных, который принимает набор данных в качестве параметра.

вот как я использую компонент datatable.

index.html

... 
<datatable dataset="ViewModel.dataset"></datatable> 
... 

index.controller.js

(function() { 

    'use strict'; 

    angular 
    .module('DashboardApplication') 
    .controller('PagesIndexController', PagesIndexController); 

    function PagesIndexController() { 

    var self = this; 

    self.dataset = {}; 

    Restangular.one('someurl').get().then(function(pages) { 
     self.dataset = pages; 
    }); 
    } 
})(); 

datatable.component.js

(function() { 

    'use strict'; 

    angular 
    .module('DashboardApplication') 
    .component('datatable', { 
     bindings: { 
     dataset: '<' 
     }, 
     templateUrl: '/frontend/templates/dashboard/components/data-table.html', 
     controller: 'DataTableController' 
    }); 

})(); 

datatable.controller.js

(function() { 

    'use strict'; 

    angular 
    .module('DashboardApplication') 
    .controller('DataTableController', DataTableController); 

    function DataTableController() { 
    var self = this; 
    console.log(self.dataset); // which is undefined! 
    } 

})(); 

Проблема в том, что я получаю undefined для dataset в datatable.controller.js. Есть ли решение для этого ?!

Answer 1

Используйте крюк $onChanges жизненного цикла, чтобы увидеть значение, когда оно становится определено:

angular 
    .module('DashboardApplication') 
    .controller('DataTableController', DataTableController); 

    function DataTableController() { 
    var self = this; 
    //console.log(self.dataset); // which is undefined! 
    this.$onChanges = function(changesObj) { 
     if (changesObj.dataset) { 
      console.log(changesObj.dataset.currentValue); 
     }; 
    }); 
    } 

Для получения дополнительной информации см. AngularJS Developer Guide -- Components.

Answer 2

Я думаю, что вам не хватает

controllerAs: 'vm' 

линию от компонента, который будет связывать модель с «это» в контроллере вместо $ рамки (также означает, что вы можете достичь вашей ViewModel как «ВМ» внутри вашей точки зрения, как:

ng-if="vm.dataset" 

Но я думаю, что это будет по-прежнему неопределенным в этот самый момент, у вас есть несколько вариантов здесь:

1. вы можете передать обещание компонент и написать то на это

2. вы можете разместить нг-если = «набор данных & & dataset.length», где вы называете компонент в вашем внешнем HTML. Таким образом, логика внутри вашего компонента будет срабатывать только тогда, когда на самом деле есть данные в свойстве.

   <datatable ng-if="ViewModel.dataset" dataset="ViewModel.dataset"></datatable> 
   

3. вы можете написать что-то вроде этого в компоненте:

   $scope.$watch('self.dataset', function() { 
       if (self.dataset) { 
        alert ('hi'); 
       } 
   });