ポストDOMロードのためのangularディレクティブ

Question

私はポストDOMロードのためのディレクティブを構築するのに役立つ初心者です。 以下のスクリプトは機能的ですが、タイマーを使用しています。私はむしろ、タイマよりポストDOM負荷のタイミングを保証する、より強固なものを持っています。 私がstackoverflowとangular docsで見つけた情報から、指示はDomが読み込まれた後にスクリプトを実行する方法のようです。

私はディレクティブを作成しようとしましたが（これも添付しています）、何らかの理由で私のディレクティブに渡そうとしている値に到達できません。

ここ

app.controller('EditCropCtrl', function($scope, $rootScope, $log, $location, $injector, $timeout) {  
    var service = $injector.get('copyImageMasterURLService'); 
    $scope.masterUrl = service.getMasterUrl(); 
    $scope.crop = service.getCrop(); 

    // image editor library 
    var pos = new Position(); 
    pos.top = $scope.crop.top; 
    pos.left =$scope.crop.left; 
    pos.width = $scope.crop.width; 
    pos.height = $scope.crop.height; 

    $timeout(function() { //need this timeout to be sure its run after DOM render. 
     var maxWidth = document.body.clientWidth; 
     var maxHeight = window.innerHeight; 
     var imcw = pos ? pos.width : maxWidth 
     var imch = pos ? pos.height : maxHeight; 
     var rw = maxWidth/imcw; 
     var rh = maxHeight/imch; 

     window.imageEditorZoom = rw < rh ? rw : rh; 
     window.imageEditor = new ImageEditor("cropMaster"); 
     editor.disableScaling(); 
     editor.setCropping(pos); 
     editor.zoom(window.imageEditorZoom); 

    }, 1000, false); 
}); 

も上記のための創造的なディレクティブでの私の試みですが、両方croptool、POSXリターンヌル：

ここ

は私のコントローラで作業を行いますが、タイマーに依存しているものです

app.controller('EditCropCtrl', function($scope, $rootScope, $log, $location, $injector, $timeout) {  
    var service = $injector.get('copyImageMasterURLService'); 
    $scope.masterUrl = service.getMasterUrl(); 
    $scope.crop = service.getCrop(); 

    // construct image editor 
    var pos = new Position(); 
    pos.top = $scope.crop.top; 
    pos.left =$scope.crop.left; 
    pos.width = $scope.crop.width; 
    pos.height = $scope.crop.height; 

    $scope.croptool = { 
     posX: pos 
    }; 
}); 
app.directive('myCroptool', function($timeout) { 
    var crop = null; 
    function link(scope, element, attrs) { 
     $timeout(function() { // You might need this timeout to be sure its run after DOM render. 
      console.log("...0 here we are... ", croptool, posX); 

     }, 0, false); 
    } 
    return { 
     link: link 
    }; 
}); 

私は本当にこれを理解したいです。前もって感謝します。

Answer 1

では、コントローラ

app.controller('EditCropCtrl', function($scope, $rootScope, $log, $location, $document, $injector, $window) {  
    var service = $injector.get('copyImageMasterURLService'); 
    $scope.masterUrl = service.getMasterUrl(); 
    $scope.crop = service.getCrop(); 

    // image editor library 
    var pos = new Position(); 
    pos.top = $scope.crop.top; 
    pos.left =$scope.crop.left; 
    pos.width = $scope.crop.width; 
    pos.height = $scope.crop.height; 

    this.$postLink = function() { 
     var maxWidth = $document.body.clientWidth; 
     var maxHeight = $window.innerHeight; 
     var imcw = pos ? pos.width : maxWidth 
     var imch = pos ? pos.height : maxHeight; 
     var rw = maxWidth/imcw; 
     var rh = maxHeight/imch; 

     $window.imageEditorZoom = rw < rh ? rw : rh; 
     $window.imageEditor = new ImageEditor("cropMaster"); 
     editor.disableScaling(); 
     editor.setCropping(pos); 
     editor.zoom($window.imageEditorZoom); 

    }; 
});