Передача данных во вновь созданную директиву в angularjs, когда ajax-вызов завершен

Question

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

angular.module('app') 
    .directive('myGrid',function() { 
     return { 
     restrict: 'E', 
     link: function (scope, el, attrs) { 

      var data = []; 
      var columns = [ 
      {id: "title", name: "Title", field: "title", width: 160, cssClass: "cell-title", editor: Slick.Editors.Text}, 
      {id: "desc", name: "Description", field: "description", width: 400, editor: Slick.Editors.LongText}, 
      {id: "duration", name: "Duration", field: "duration",minWidth: 160, editor: Slick.Editors.Text}, 
      {id: "start", name: "Start", field: "start", minWidth: 160, editor: Slick.Editors.Text}, 
      {id: "finish", name: "Finish", field: "finish", minWidth: 160, editor: Slick.Editors.Text} 

      ]; 

      scope.grid = new Slick.Grid(el, scope.data, columns, scope.gridOptions); 
     } 
    } 
}); 

Вот как я использую директиву !!

<my-grid id="myGrid" style="height:500px;" grid-options="gridOptions" ></my-grid> 

Это мой контроллер

$http.get(url) 
      .success(function(response, status, headers, config) { 
       $scope.data = response.data; 
     }); 

Проблема после вызова HTTP закончится, я не вижу каких-либо данных в сетке.

Answer 1

Это потому, что ваш контроллер и директива выполняются параллельно.

Что нужно, так это заставить директиву ждать, пока контроллер завершит вызов API.

Вы можете достичь этого с помощью использования $ emit.

В контроллере

var response = some_json; 
$scope.$emit('controllerUpdate', response); 

В директиве, заключите код с

$scope.$on('controllerUpdate',function(event, response){ 
    // Do your work here 
});