角度指令爲後DOM加載

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返回NULL：

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

聽起來像是你需要使用$ postLink生命週期掛鉤控制器

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

    }; 
});