$location을 사용한 AngularJS 페이징경로는 ngView 새로고침 없음

$location을 사용한 AngularJS 페이징경로는 ngView 새로고침 없음

한 페이지 어플리케이션으로 홈페이지가 로딩되어 일련의 아이디어를 표시하고 싶습니다.각 아이디어는 애니메이션 플래시 용기에 표시되며 애니메이션이 표시되어 아이디어 사이를 순환합니다.

아이디어는 $http를 사용하여 로드됩니다.

$scope.flash = new FlashInterface scope:$scope,location:$location

$http.get("/competition.json")
  .success (data) ->
    $scope.flash._init data

다만, 이력 네비게이션과 UX의 이점을 얻기 위해 $location을 사용하여 각 아이디어의 올바른 URL을 표시하도록 주소 표시줄을 업데이트하고 싶습니다.

$location.path "/i/#{idea.code}"
$scope.$apply()

이 이벤트가 Angular와 함께 진행되었기 때문에 $apply로 전화드렸습니다.JS 컨텍스트 ie 플래시현재 컨트롤러/뷰는 그대로 두고 뷰는 새로고침하지 않았으면 합니다.이는 뷰를 새로고침하면 플래시 객체 전체가 폐기되고 프리로더 사이클이 다시 시작되기 때문에 매우 좋지 않습니다.

preventDefault를 실행하기 위해 $routeChangeStart를 수신하려고 했습니다.

$scope.$on "$routeChangeStart", (ev,next,current) ->
  ev.preventDefault()
$scope.$on "$routeChangeSuccess", (ev,current) ->
  ev.preventDefault()

하지만 소용없었다.$location.path를 변경할 때 뷰 새로고침을 덮어쓰는 방법을 찾을 수 있다면 모든 것이 정상일 것입니다.

난 아직도 Angular를 더듬고 있어JS는 제 목표를 달성하기 위해 앱을 어떻게 구성할지 조언해주시면 감사하겠습니다!

경로를 업데이트하는 대신 페이지 번호로 쿼리 매개 변수를 업데이트하십시오.

쿼리 파라미터 변경을 무시하도록 경로를 설정합니다.

....
$routeProvider.when('/foo', {..., reloadOnSearch: false})
....

의 앱 업데이트 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」$location 라이선스:

...
$location.search('page', pageNumber);
...

이 블로그 투고 내용:

디폴트로는 모든 로케이션 변경은 라우팅 프로세스를 거치며 각도 뷰가 갱신됩니다.

하지만 이것을 단락시킬 수 있는 간단한 방법이 있다., 등 변경을 합니다.$location.path()하면, 「이벤트 합니다.$locationChangeSuccess이치노이 작업은 이벤트를 캡처하여 경로를 이전 상태로 재설정하는 것입니다.

function MyCtrl($route, $scope) {
    var lastRoute = $route.current;
    $scope.$on('$locationChangeSuccess', function(event) {
        $route.current = lastRoute;
    });
}

제 솔루션은 $routeChangeStart를 사용하는 것이었습니다. $locationChangeSuccess와 같은 추가 변수 없이 $routeChangeStart를 사용하여 "다음" 및 "다음" 경로와 "마지막" 경로를 제공합니다.

은 " 수 입니다.next.params.yourproperty"/property/value" URL 스타일 및 사용 방법을 사용하는 경우$location.url또는$location.path대신 URL을 변경하다$location.search()URL 스타일에 따라 달라집니다.

제 경우, 컨트롤러가 변경되지 않도록 하기 위해 뿐만 아니라 경로 변경을 방지하기 위해서도 사용했습니다.

$scope.$on('$routeChangeStart',function(e,next,last){
  if(next.$$route.controller === last.$$route.controller){
    e.preventDefault();
    $route.current = last.$$route;
    //do whatever you want in here!
  }
});

개인적으로 나는 Angular가 된 기분이다.JS는 이를 제어하는 방법을 제공해야 합니다.현재로서는 브라우저의 위치를 변경할 때마다 루트를 변경할 것으로 상정하고 있습니다.

로드 중이어야 합니다.$location의존성 주입을 통해 다음을 사용합니다.

$scope.apply(function () {
    $location.path("yourPath");
}

사용하는 동안 해시태그(#)를 사용하면 안 된다는 점에 유의하십시오.$location.pathHTML5 모드 호환성을 위해서입니다.

$location Change Success 이벤트는 다소 강제적인 접근이지만 경로를 체크하면 루트 경로템플릿이 변경되지 않았을 때 페이지 새로고침을 피할 수 있지만 다른 루트템플릿으로 전환하면 페이지가 새로고침되는 것을 알 수 있습니다.

var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (event) {
    if (lastRoute.$$route.originalPath === $route.current.$$route.originalPath) {
        $route.current = lastRoute;
    }
});

이 코드를 특정 컨트롤러에 추가하면 새로고침이 보다 인텔리전트해집니다.

편집: 조금 쉬워졌지만, 결국 URL을 알기 쉽게 하기 위해 쓰는 코드의 복잡함이 마음에 들지 않았습니다.결국 검색 매개 변수로 전환하여 각도 조절이 훨씬 더 잘 되었습니다.

이렇게 해야 되는데 이렇게 호들갑을 떨다가$locationChange~실제로 이 작업을 수행할 수 있다는 것을 알게 되었습니다.route를 사용합니다.

$routeProvider.when(
    '/page',
    {
        templateUrl : 'partial.html',
        controller : 'PageCtrl',
        resolve : {
            load : ['$q', function($q) {
                var defer = $q.defer();

                if (/*you only changed the idea thingo*/)
                    //dont reload the view
                    defer.reject('');
                //otherwise, load the view
                else
                    defer.resolve();

                return defer.promise;
            }]
        }
    }
);

각도 포함JS V1.7.1,$route에 대한 지원이 추가되었습니다.reloadOnUrl설정 옵션.

If route(경로)/foo/:id가지다reloadOnUrl=false세트, 다음으로 이동/foo/id1로./foo/id2는 이벤트만 브로드캐스트하고 뷰를 새로고침하여 컨트롤러를 재검증하지 않습니다.

언급URL : https://stackoverflow.com/questions/12422611/angularjs-paging-with-location-path-but-no-ngview-reload