동작하기 전에 템플릿이 렌더링 될 때까지 기다리시겠습니까?

버튼으로 탐색 할 수있는 항목이 많습니다. 목록 컨트롤러에 대한 데이터를 즉시로드하면 페이지에 변경 사항이 표시되기 전에 각진이 목록을 작성하는 동안 지연이 있습니다. 대신 50ms를 기다리는 목록 컨트롤러에서 setTimeout을 수행하면 화면이 즉시 변경되고 버튼의 반응이 느껴집니다.동작하기 전에 템플릿이 렌더링 될 때까지 기다리시겠습니까?

제 질문은 setTimeout이 거대한 핵이 있다는 것을 확실히 알고 있기 때문에 제 질문은 "적절한"방법입니다.

는 Plunkr와 편집 : (당신이 $ routeProvider를 사용하는 가정)

Test.controller('ListController', function($scope) { 
    var arr = []; 
    for (var i=0; i<5000; i++) { 
    arr[i] = i; 
    } 
    $scope.list = arr 
}); 

Test.controller('ListThatWaitsController', function($scope) { 
    var arr = []; 
    for (var i=0; i<5000; i++) { 
    arr[i] = i; 
    } 
    setTimeout(function() { 
    $scope.list = arr; 
    $scope.$apply() 
    }, 10); 
});

출처

2014-07-20 Joren

페이지가 변경되기 전에 '무엇을 의미합니까?' 플 런커를 게시 할 수 있습니까? 그 행동은 나에게 잘못된 것처럼 보인다. – pixelbits

50ms 지연으로 시각적으로 큰 차이가 발생할 수 있음을 알기가 어렵습니다. – charlietfl

지연이 차이를 만드는 것이 아닙니다. 차이점은 버튼을 누른 후 또는 실제로 표시 할 준비가 된 후에 즉시 발생하는지 여부입니다. – Joren

당신의 경로에 resolve 속성을 사용 : http://plnkr.co/edit/VqEiiAFZfV1hoXadw0vf?p=preview

또한, plunkr에서 일부 코드가 스택 오버 플로우가 어떤 이유로 그것을 필요로하기 때문에

$routeProvider.when('/myroute', { 
    templateUrl: 'view/partial.html', 
    resolve: { 
    listData: ['service', function (service) { 
     return service.getList(); // Returns a promise that resolves with list 
    }] 
    } 
});

$ 경로를 관리하는 컨트롤러에 관계없이이 방법을 사용하면 listData을 삽입 할 수 있습니다. 원하는 배열이 되겠지만 데이터가 준비 될 때까지 $route이 해결되지 않습니다.

출처

2014-07-20 00:57:10

이것은 내가 원하는 것과 정확히 반대되는 것 같습니다. 데이터가 사용 가능하거나 렌더링되기 전에 경로 변경을 해결하고 템플릿을 변경해야합니다. 변경 사항을 등록하기 전에 데이터를 기다리면 버튼이 응답하지 않습니다. – Joren

동작하기 전에 템플릿이 렌더링 될 때까지 기다리시겠습니까?

답변

관련 문제