2012-10-13 5 views
0

angularjs에 $ resource 서비스를 사용하여 서버의 json 콘텐츠를 비동기 적으로로드합니다. 콘텐츠가로드 될 때 페이지에 gif 로더를 표시합니다. 난 비 연속 요청이 완료되면 로더를 제거 할 수 있어야합니다. 로더를 제거 할 수 있도록 준비 이벤트를 어떻게 잡을 수 있습니까?

function PlaylistController($scope, $route, $http, Song,Artists,Albums,Drive,Children){ 
    function render(){ 
     $scope.songs = Song.list() 

     //Obviously this removes the loading class immediately 
     //I want to remove it when Song.list() is complete 
     $('body').removeClass('loading'); 
    } 

    $scope.$on("$routeChangeSuccess", function($currentRoute, $previousRoute){ 
    //When the route changes,update the $scope variables 
    render(); 
}); 

답변

1

컨트롤러 내부에서 DOM 조작을해서는 안됩니다.

$scope.loading = true<body ng-class="loading && 'loading'">은?

$scope.loading을 true로 설정하면 loading 클래스가 본문에 추가되고 false로 설정하면 제거됩니다.

당신이 아이 컨트롤러에서 변경해야하는 경우

는 객체 (같은 $scope.data.loading = true)의 내부에 넣어 또는 가능한 모든 경우 DOM을 조작 할 수 없습니다 $scope.startLoading = function(){ $scope.loading = true; }

+2

1 각도 컨트롤러처럼 변경하는 기능을 만들 수 있습니다. http://docs.angularjs.org/guide/concepts#controller –

+0

하지만 콘텐츠가로드되면 $ scope.loading = false를 어떻게 변경할 수 있습니까? 로드가 시작되면 메서드는로드 클래스를 본문에 추가하지만로드가 완료되면 결코로드 클래스를 제거하지 않습니다. –

+0

'$ scope.loading'을 정의 할 컨트롤러에서'= false'를 호출하거나'$ scope.stopLoading = function() {$ scope.loading = false}'와 같은 함수를 자식 범위 사용에 사용합니다. ngClass는 $ digest마다 표현식을 평가합니다. 로드가 false 인 다이제스트에서 '로드하는'클래스는 평가에서 반환되지 않으며 ngClass는이를 제거해야한다는 것을 이해합니다. 이 예제보기 http://jsfiddle.net/s8JVj/ –

관련 문제