url 변경 시 Angular UI-Router open modal window

url 변경 시 Angular UI-Router open modal window

저는 프로젝트에서 각의 라우터와 각의 부트스트랩을 사용합니다.

다음과 같은 사용 사례를 구현하고자 합니다.

사용자가 "편집" 버튼을 클릭하면 UI-Router가 URL을 변경하고 modal 창을 엽니다.브라우저의 뒤로 버튼을 클릭하여 되돌아가면 모드 창이 닫힙니다.

모드 창을 열었을 때 사용자 다시 로드 페이지를 사용하면 애플리케이션은 모드 창 내용을 주 UI-뷰 컨테이너에 렌더링해야 합니다.

이 사이트에서 볼 수 있는 이 사용 사례: http://canopy.co/ (아이템을 클릭하고 페이지를 다시 로드해 보십시오.)

질문:위에서 설명한 행동을 어떻게 구현합니까?

여기 제 jsFiddle http://jsfiddle.net/sloot/ceWqw/3/ 입니다.

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('app', {
      url: '/',
      controller: 'AppCtrl',
      templateUrl: '/views/app.html'
    })
    .state('item', {
      url: '/profile',
      controller: 'ItemCtrl',
      templateUrl: '/views/item.html'
    });
})
.controller('AppCtrl', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: '/views/item.html'
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller('ItemCtrl', function(){});

여기 ui-router FAQ에 대한 좋은 예가 있습니다.키는 onEnter 매개변수를 사용하고 있습니다.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

다음은 ui-bootstrap의 $modal 서비스를 이용한 예시입니다.이 예제에서는 onEnter 함수만 지정합니다.템플릿, 컨트롤러 등이 없습니다.따라서 기본적으로 모달이 표시된 다음 닫히면 항목 상태로 돌아갑니다.모드가 닫힐 때 앱이 전환하는 상태를 처리할 책임은 여전히 있습니다.

$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.finally(function() {
            $state.go('^');
        });
    }
});

다음은 UI-Router's Github에서 수행하려는 작업을 설명하는 문제입니다.

Pinterest의 오버레이와 유사한 상태 전환

이 답변에서 구현 내용을 확인하실 수 있습니다.사용자가 원하는 효과를 얻을 수 있는 방법은 최신 버전으로 패치가 적용되었으며 기능을 유지하기 위해 이전 버전의 UI-Router를 사용하고 있습니다.

언급URL : https://stackoverflow.com/questions/21652428/angular-ui-router-open-modal-window-on-url-change