pinterest와 같은 각도 UI 라우터 모달

Question

갤러리는 http://pinterest.com과 매우 흡사합니다. Pinterest에서, 핀을 클릭하면, 당신이보고 있던 갤러리의 상단에있는 핀 페이지를 보여줍니다. URL은 핀 URL로 바뀌며 세부 정보 뒤에있는 갤러리에 대한 정보는 포함하지 않습니다. 다시로드하지 않고 탐색 한 갤러리로 돌아가려면 "X"또는 배경을 클릭하십시오.

어떻게 이것을 UI-Router와 복제 할 수 있습니까?

요구 : 세부 URL이 (책갈피 또는 링크에서) 차가운 입력하면 같은 세부 사항 같은 세부 사항에 여러 갤러리를 통해

스위치를 모달

• 디스플레이는
• 모든 경우에 URL입니다 빈 회색 배경을 뒤에서 표시하고 닫을 수 있습니다.

고마워요! angular-ui-router's FAQ에서

Answer 1

는 :

$stateProvider.state("items.add", { 
    url: "/add", 
    onEnter: function($stateParams, $state, $modal, $resource) { 
     $modal.open({ 
      templateUrl: "items/add", 
      resolve: { 
       item: function() { new Item(123).get(); } 
      }, 
      controller: ['$scope', 'item', function($scope, item) { 
       $scope.dismiss = function() { 
       $scope.$dismiss(); 
       }; 

       $scope.save = function() { 
       item.update().then(function() { 
        $scope.$close(true); 
       }); 
       }; 
      }] 
     }).result.then(function(result) { 
      if (result) { 
       return $state.transitionTo("items"); 
      } 
     }); 
    } 
}); 

이 모달을위한 UI - 부트 스트랩에 따라 달라집니다.

fancybox 또는 다른 라이트 박스를 사용하려는 경우 비슷한 방법을 사용할 수 있습니다. onEnter 콜백을 사용하여 라이트 박스를 초기화 한 다음 닫을 때 부모 상태로 전환하십시오. (라이트 박스를 닫지 않고 전환하는 경우 onExit 콜백을 추가 할 수 있습니다.)