AngularJS run compile directives after $http response

Question

In the $scope of my controller, I have an object called myObject that is to be populated by a $http.get(...).

angular.module('myApp').controller('myController', ['$scope', function($scope) {

    this.myObject={};  //object to be loaded by $http.get

    //We initiate the request to load myObject.
    $http({
        url: '/myurl',
        method: 'GET'
    }).then(function(result){
           this.myObject = result.data;
    }, function(data, status){});

}]);

In the HTML view, there are a lot of directives that depend on myObject, and will return errors such as "Cannot read property 'xxx' of null" if it is run before the $http.get returns a response.

How would you go about pausing the directives being run before this.myObject is loaded?

it depends on how the directive is using the data. Would be nice if you post the directive code too. — Subash
– Subash, Commented Jan 22, 2016 at 6:31

Subash · Accepted Answer · 2016-01-22 06:37:05Z

You can delay the execution of directive by wrapping it with ng-if. You can do something like below.

HTML:

<div ng-if="vm.loadingComplete">
  <your-directive your-data="vm.myObject"></your-directive>
</div>

JS:

angular.module('myApp').controller('myController', ['$scope', function($scope) {
    var vm = this; 

    // notice I have create variable vm and cached this
    // if not done so, you cannot use this.something inside nested functions
    // as this would mean something else there

    vm.myObject={};  //object to be loaded by $http.get
    vm.loadingComplete = false;

    //We initiate the request to load myObject.
    $http({
        url: '/myurl',
        method: 'GET'
    }).then(function(result){
       // you had a issue here before
       // this.myObject is not same as this.myObject outside this function
       vm.myObject = result.data;
       vm.loadingComplete = result;
    }, function(data, status){});
}]);

Abhilash Augustine · Accepted Answer · 2016-01-22 06:37:14Z

Assume your directive is 'testDir',

app.directive('testDir', function(){
 return {
            restrict: "AE",
            transclude: true,
            replace: false,
            //templateUrl: "/views/api_status_chart.html",
            scope: {
                myData: '=' // this is your data from the controller
            },
            link: function (scope, element, args) {

                  initializeDirective function(){
                       // wrap all your functionality inside this function
                  }

                  scope.$watch('myData', function(newVal){
                       // if new value is not null do your all computation
                       if(newVal != null && newVal.length > 0){
                              initializeDirective();
                       }
                  });
            }
});

<test-dir my-data="myObject "> </test-dir>

Concept

Do all your functionality only when the data is not null. Otherwise do nothing.

dreamweiver · Accepted Answer · 2016-01-22 06:47:52Z

0

use ngIf directive which comes with angular js and validate the myObject in the html template before using it .

`<div ng-if="myObject!=== null"> <!-- set myObject = null by default in controller -->
   <!-- use myObject's values to generate DOM -->
</div>`

Since angular works on two way binding , whenever myObject is set to a value, angular will evaluate ng-if directive on the html template.

ngIf - directive in module ng

answered Jan 22, 2016 at 6:47

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

AngularJS run compile directives after $http response

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related