AngularJS와 - 나는 AngularJS와에 대한 완전한 멍청한 놈 내 첫 번째 프로젝트 구축을 시작하고 모든 단계에서 장애물을 타격 한 TweenMax

Question

사용하여 위치 인식 NG-보기 탐색 ...

내가 구축하기 위해 노력하고있어 아주 간단한 일이, 여기에 내가 달성하기 위해 노력하고있어의 요점이다 :

• 를 내가 5 페이지/당겨와이 문서를 기반으로 JSON 데이터를 사용하여 만든 얻을 전망이 - blog.brunoscopelliti.com/how -to-defer-route-definition-in-an-angularjs-web-app를 사용합니다. 어느 것이 공장에 배선되어 있습니다. 해서 getJSON()

  function($route, $location, $http, $q) { 
  
  var jsonLoaded = {}; 
  
  jsonLoaded.getJSON = function() { 
  
      var deferred = $q.defer(); 
      $http.get('pages.json').success(function(data) { 
       deferred.resolve(data); 
      }).error(function() { 
       deferred.reject(); 
      }); 
      return deferred.promise; 
  } 
  return jsonLoaded;  
  

• 뷰 탐색 할 때, I는 계층 카루셀 전환 효과를 갖고 싶다. 즉, 인덱스 0을 클릭하면 인덱스 1을 오른쪽에서 왼쪽으로 탐색하고 인덱스 0을 다시 클릭하면 뷰가 왼쪽에서 오른쪽으로 이동합니다. 이것은 내 일정에있는 animate.js 파일에서 조건부로 지정됩니다 hasClass()를 사용하여.

내가 3 개 주 별도의 plunks와 옵션 시도 : 사용

옵션 1 클래스 추가 NG를 클릭 - http://plnkr.co/edit/0mrebo8BMlrz1YkttxsT?p=preview

$scope.navDirection = function(pageClass) { 
    $scope.pageTransClass = pageClass; 
}; 

• 이 가장 좋은 결과를 얻을 수를, 원하는대로 정확히 탐색하고, 브라우저의 뒤로 또는 앞으로 버튼을 클릭 할 때 클래스가 동일하게 유지되는 문제가 발생합니다.

• 입장 및 퇴실보기에 대한 클래스를 추가/변경합니다.

옵션 2 사용하여 $의 routeProvider의 해결 - 클래스를 추가 할 때이 지연이 발생 http://plnkr.co/edit/SPfgKUyYt7LMQITHzj2I?p=preview

resolve: { 
    direction: ["changePageDirection", 
     function(changePageDirection) { 
      return changePageDirection.direction($route.current.params.pageId, $routeParams.pageId); 
     } 
    ] 
} 

• , 즉는 정말 3 탐색 항목을 클릭 작업을 시작합니다.

• 이 메서드는 "enter"애니메이션에 클래스를 추가/변경하지만이 "leave"는 이전 클래스를 유지합니다.

옵션 3 관찰하여 - http://plnkr.co/edit/TwtkGrY1Ww4uYY8n2LO5?p=preview

return function(scope, element, attrs) { 

    attrs.$observe("pageDirectionObs", function (value) { 
     if (value) { 
      element.addClass(value); 
     } 
    }); 
}; 

• 2 만 정말 3 클릭에 일을 시작이 같은 옵션.

• 이 방법은 "입력"애니메이션의 클래스를 추가/변경하지만이 "이탈"은 이전 클래스를 계속 유지합니다.

내 주요 문제 이해 (또는 그 부족) $의 범위 및 AngularJS와 모든 것을 컴파일하는 방법 중 하나라고 생각하기 시작하고있다.

나는 몇 주 동안 지금 여기에 있었고, 내가 어디에 있어야하는지 가깝지 않습니다. 어떤 도움이라도 대단히 감사하겠습니다.

미리 감사드립니다.

UPDATE : 여기

• 는 UI 뷰 및 UI - 뷰 - 엑스트라 여기

• 를 사용하여 4 예이다는 쿵하는 소리입니다 - embed.plnkr.co/vjSBLzMMKIrkHD7sOctN/preview

Answer 1

내 솔루션은 실제로 매우 간단했습니다. 각 방향에 대한 클래스를 변경하는 대신 $ rootScope에 변수를 첨부했습니다.이 변수는 페이지 전환 이전에 변경되고 클래스 대신 $ rootScope 변수를 기반으로 애니메이션을 기반으로합니다.