在AngularJS中的页面完成事件。

13 浏览
0 Comments

在AngularJS中的页面完成事件。

我正在尝试在AngularJs中获取页面完成事件，即在模板完全渲染后。以下是我尝试的代码：

app.controller('Mycontroller',function($scope,$http,$stateParams,$sce,$timeout){    
var request = $http({       
        url:"/test.php",            
        headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
    }); 
    request.success(function(data){                     
        $scope.testhtml = $sce.trustAsHtml(data);               
    });
    $scope.$on('$viewContentLoaded', function(event) {   
            $('#firstcontent').trigger('create'); 
            alert('完全加载');       // 这个警告在模板渲染之前弹出，（我想在模板渲染后弹出）
    }); 
});

0

1 答案

0 Comments

在AngularJS中，当页面加载完成并且模板渲染完毕后，我们可能需要执行一些特定的操作。然而，在某些情况下，我们可能会发现代码在模板渲染完成之前就执行了。这个问题的原因是，AngularJS的渲染过程是异步的，并且可能需要一些时间来完成。

为了解决这个问题，我们可以使用$timeout函数。通过将我们的代码放在$timeout函数中，我们可以确保模板已经被渲染。下面是一个示例代码：

request.success(function(data){
    // 在当前运行的digest中执行
    $scope.testhtml = $sce.trustAsHtml(data);
    $timeout(function(){
        // 在之前提到的digest完成之后执行
        // 并且在DOM渲染完成之后执行
        $('#firstcontent').trigger('create');
        alert('fullyloaded');
    });
});

在这段代码中，我们将我们的代码放在$timeout函数中。这样，我们可以确保代码在模板渲染完成后执行。当$timeout函数没有指定延迟时，它会尽快执行，也就是在当前事件循环中的其他任务执行完毕后。

通过这种方式，我们可以解决在模板渲染完成之前执行代码的问题。这种方法是AngularJS开发中的一种常见做法。

如果你想了解更多关于这个问题的解决方法，可以参考以下链接：https://stackoverflow.com/a/17239084/1356062和https://stackoverflow.com/a/17303759/1356062。

另外，某些情况下过使用延时作为解决方法，但这只是一种权宜之计。因为延时的时间可能无法确定，并且可能导致代码执行得过早或得过晚。通过使用$timeout函数，我们可以更可靠地解决这个问题，并确保代码在模板渲染完成后执行。

0