javascript - I want to create konvajs stage using angularjs directive can anyone help me -

i tried below code in controller , it's working fine, not have idea how convert below code directive. want create directive in angularjs , include index.html file.

 'use strict';        //prepared stage object       var preparedstage;        //onload function call first when controller invkoed       function onload() {         var width = window.innerwidth;         var height = window.innerheight;          // first need konva core things: stage , layer         preparedstage = new konva.stage({           container: 'container',           width: width,           height: height         });       }        //stage controller       function stagecontroller($scope) {         //load function          onload();         //get prepared stage object.         var stage = preparedstage;         //get layer object         var layer = new konva.layer();         //add laeyr onto stage         stage.add(layer);          // going draw special canvas element         var canvas = document.createelement('canvas');         canvas.width = 800;         canvas.height = 400;         // creted canvas can add layer "konva.image" element         var image = new konva.image({           image: canvas,           x: stage.width() / 4,           y: stage.height() / 4,           stroke: 'green',           shadowblur: 15         });         //add image onto layer         layer.add(image);         //finally drew stage.         stage.draw();       }     //angular module        var app = angular.module('app', []),           requires = [             '$scope',             stagecontroller           ];       //controller dependences array.       app.controller('stagecontroller', requires); 

here's something might you. although example uses kineticjs old version of konvajs. replace kinetic konva , things work you.

(function() {     'use strict';     angular.module('konva')     .directive('stage', ['$rootscope',     function stagedirective ($rootscope) {         return {             restrict: 'ea',             scope: {                 stagewidth: '=',                 stageheight: '='             },             link: function linkfn (scope, elem, attrs) {                 var id = attrs["id"];                 if (!id) {                     id = math.random().tostring(36).substring(8);                     elem.attr('id', id);                 }                 var stagewidth = scope.stagewidth || 800;                 var stageheight = scope.stageheight || 600;                  var konva= {                     stage: new konva.stage({                         container: id,                         width: stagewidth,                         height: stageheight                     })                 };                  scope.konva= konva;                  $rootscope.$broadcast('konva:ready', konva.stage);             }         };     }]); })();