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
}
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());
}
}