Angular and CreateJS not finding the stage element

814 views Asked by At

I have an Angular view that is inherited from an ng-view element.

In the view file, I have a canvas. The code is controlled by a controller. What I want to do is call up a stage to add elements on the canvas.

However when I run the createJS.Stage function, a stage is created with everything as null and no bounds.

I'm guessing the element is not getting bound to the stage but I can't figure out why

index.html

<ng-view     style='height: 100%;'></ng-view>

template.html

<div class='middle' style="min-height:90%;height:90%">
<div class='col-lg-8'>
<canvas id="demoCanvas" class='col-lg-11' style='margin-top:10px'></canvas>
</div>
</div>

JS

 app.controller('taskController',function($scope,$location,$routeParams,dataFactory){
    var stage = new createjs.Stage("demoCanvas");
    console.log(stage.getBounds()); 
   //bounds turn up as null as well as style and any other function that I run
}
1

There are 1 answers

1
cjds On BEST ANSWER

So turns out the problem is that the DOM is not completely loaded when an AngularJS controller is run

The trick to running it once the DOM has finished loading is

app.controller('taskController',function($scope,$location,$routeParams,dataFactory){
    $timeout(function(){
        visualInspectionHandler();
    });
    function visualInspectionHandler(){
          var stage = new createjs.Stage("demoCanvas");
          console.log(stage.getBounds()); 
    }
}