Angular directive async data not binding?

Question

This is the sample code i tried to implement my directive: donut-chart.directive

I modified this controller js (code) to get data from web api using $http.get

But here not passing data into directive it is undefined in the isolate scope. Please give suitable solution for this.

Thank you

How does a question like this get 3 up-votes... How did you modify the controller.js code? And as @brianliu states below, you must handle the async nature of JavaScript. You can't plot data you don't have yet. — Mark
– Mark, Commented Oct 21, 2016 at 21:20

Brian Liu · Accepted Answer · 2016-10-21 08:16:53Z

1

$http.get is async, if you console.log('scope.data', scope.data); in donut-chart.directive will be undefined because the promise is not yet resolved.

I suggest you can add data dependency to $routeProvider to make sure all the data is fetched before route change

.when('/edit', {
  controller: 'MainCtrl',
  templateUrl: 'edit.html',
  resolve: function() {
      // your $http get data and return promise in this function
  }
}

answered Oct 21, 2016 at 8:16

Brian Liu

3412 silver badges6 bronze badges

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

2 Comments

Wella Over a year ago

Thank you @Brian Liu for the answer but i cannot use this option in my scenario

Brian Liu Over a year ago

No worries, as long as you found the solution fits your project.

Collectives™ on Stack Overflow

Angular directive async data not binding?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related