角度指令为后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); 

    }; 
});