angularjs scope not accessable in directive

Question

I am trying to load a chart using angularjs directive. I want to load the chart after data comes from server response. But scope is empty. My code is

<div class="span4" ui-if="loadingIsDone">
                                            <article id="piChart2">
                                                <section id="toolBox1">
                                                    <h3 id="toolH1"></h3>
                                                    <p id="toolD1"></p>
                                                </section>
                                                <article id="toolTip1"></article>
                                                <canvas id="canvas1" width="250" height="250" draw-chart>

                                                </canvas>
                                            </article>
                                        </div>

and my controller is

controller(){
 $scope.teamStrengths =  {};
 $scope.loadingIsDone = false;

 $http({
        url: "url", 
          method: "POST",
          data: {"userUids":uids}
         }).success(function(response){

             $scope.teamStrengths =  response.resource.strengths;//data loads successfully


             $scope.loadingIsDone = true;

             //rest of code is skipped
}

and my directive is

Directives.directive('drawChart', function() {
       return function(scope, element, attrs) {

           console.debug("element :"+element);
           console.debug("attrs :"+attrs);

             graphDraw('canvas1',scope.teamStrengths.value1,scope.teamStrengths.value2,scope.teamStrengths.value3)
         //grap loads successfully with static data



       };
     });

kindly help me, i shall be thankful

Ivan Chernykh · Accepted Answer · 2013-09-12 05:34:06Z

1

$http call is asynchronous. Directive need to $watch changes in the scope. Add this in your directive:

 scope.$watch('teamStrengths', function(newValue, oldValue) {
     if (newValue)
        graphDraw('canvas1',scope.teamStrengths.value1,scope.teamStrengths.value2,scope.teamStrengths.value3)
 }, true);

Or watch for $scope.loadingIsDone change:

 scope.$watch('loadingIsDone', function(newValue, oldValue) {
     if (newValue == true)
        graphDraw('canvas1',scope.teamStrengths.value1,scope.teamStrengths.value2,scope.teamStrengths.value3)
 }, true);

answered Sep 12, 2013 at 5:34

Ivan Chernykh

42.2k13 gold badges136 silver badges149 bronze badges

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

Collectives™ on Stack Overflow

angularjs scope not accessable in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related