Passing data to newly created directive in angularjs when ajax call is over

Question

I am trying to create custom directive out of slick grid. This is what I have done so far.

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

This is how I am using directive !!

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

This is my controller

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

Problem is after the http call is over, I do not see any data in the grid.

Answer 1

This is the because your controller and directive are both executing in parallel.

What you need is make directive wait for controller to finish its API call.

You can achieve this with help of using $emit.

In controller,

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

In directive, enclose your code with

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