如何在評估javascript之前加載指令模板

Question

我將KineticJS與AngularJS結合使用，我希望能夠將必要的JavaScript存儲到指令中。所有examples我見過KineticJS的使用defer屬性包所需的邏輯在腳本標籤，即

<script defer="defer"> 
    window.onload = function() { ... } 
</script> 

是否有可能同時推遲任何業務邏輯的執行加載指令的模板（以同樣的方式）？我試過使用controller,link,compile函數無濟於事。這裏有一個例子：

'use strict'; 

angular.module('app') 
    .directive('canvasInitializer', ['$window', function ($window) { 
    return { 
     template: "<div id='canvas-container'></div>", // load this! 
     restrict: 'C', 
     compile: function (element, attrs) { 
     return { 
      post: function(scope, element, attrs) { 
      // defer this? 
      $window.onload = function() { 
       var stage = new Kinetic.Stage({ 
       container: 'canvas-container', 
       width: 800, 
       height: 600 
       }); 

       var layer = new Kinetic.Layer(); 

       var blueRect = new Kinetic.Rect({ 
       x: 50, 
       y: 75, 
       width: 100, 
       height: 50, 
       fill: '#00D2FF', 
       stroke: 'black', 
       strokeWidth: 4 
       }); 

       layer.add(blueRect); 
       stage.add(layer); 
      } 
      } 
     } 
     } 
    } 
    }]); 

Answer 1

Aaaaaaand突然它看起來像我找到了我的問題的答案。包裝在$timeout(function() { ... })邏輯做了訣竅。請注意，我甚至沒有提供$timeout的具體時間。

'use strict'; 

angular.module('app') 
    .directive('canvasInitializer', ['$timeout', function ($timeout) { 
    return { 
     template: "<div id='canvas-container'></div>" 
     restrict: 'C', 
     link: function (scope, element, attrs) { 
     $timeout(function() { 
      var stage = new Kinetic.Stage({ 
      container: 'canvas-container', 
      width: 800, 
      height: 600 
      }); 

      var layer = new Kinetic.Layer(); 

      var blueRect = new Kinetic.Rect({ 
      x: 50, 
      y: 75, 
      width: 100, 
      height: 50, 
      fill: '#00D2FF', 
      stroke: 'black', 
      strokeWidth: 4 
      }); 

      layer.add(blueRect); 
      stage.add(layer); 
     }); 
     } 
    } 
    }]);