Dynamic grid using Angularjs

Question

I have my code in different layers: 1. A factory that contains all of my $http request, and return the promise. 2. A controller that handles that promise with a then, to a assign it to a $scope variable to then display it on a gridview.

And now I'm trying to create a directive to handle the Gridview and just pass the data as an attr to be handled in the link function and display it. With this, I'm trying to achieve code re-usability. The problem is that the data variable on the scope is coming empty due to the async call of course, what would be a much better approach to this?

angular.module('parametrosModule').factory('apiMethods', ['$http', 'apiUrl', function ($http, apiUrl) {

return {
    getBleh: function () {
               return $http.get(apiUrl.urlBase + '/getBleh');
       },

       }

    }])
 .controller('transactionController', ['apiMethods', function (apiMethods) {

  var vm = this;

  function getData() {
           apiMethods.getBleh()
              .then(function (response) {
                 vm.data = response.data;
              });
        };
}])
.directive('dynamicGrid', [function () {
    return {
        restrict: 'E',
        templateUrl: 'app/directives/dynamicGrid.html',
        scope: {
            data: '=',
            headers: '='
        },
        link: function (scope, elem, attrs) {
            var vm = this;

            vm.values = scope.data;

            vm.headers = scope.headers;

        }
    }
}]);

This is somewhat my code after formatting, the thing is that the data attr is coming empty due to the lateness in the api call. The whole idea is to create something that build itself after receiving x data from anyone in the app. Thanks!!

Show source dynamicGrid.html. If you are using variables (data,headers) directly in the template dynamicGrid.html, you do not need to track changes in variables directly in the function link. — Stepan Kasyanenko
– Stepan Kasyanenko, Commented Mar 10, 2016 at 4:48

Jorge Armando Palm · Accepted Answer · 2016-03-10 13:54:00Z

1

You do not need the link function for this. here is a working example. You just need to actually bind the model to the $scope of the directive by telling it what to bind to:

scope: {
  data: '=data',
  headers: '='
}

answered Mar 10, 2016 at 13:54

Jorge Armando Palm

3662 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

atsituab · Accepted Answer · 2016-03-10 00:10:55Z

0

you can resolve your api call so it is in fact loaded before your view renders, or you can wrap you directive in an ng-if="isDataLoaded" and in your then set it to true

answered Mar 10, 2016 at 0:10

atsituab

6372 gold badges8 silver badges20 bronze badges

Collectives™ on Stack Overflow

Dynamic grid using Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related