각도 및 ui.routes가있는 모달을 열 수 없습니다.

Question

this example을 따라 특정 상태의 부트 스트랩 모달을 표시하려고합니다. 그것은 모달없이 잘 작동합니다 (그래서 상태 설정은 괜찮을 것입니다). 필요한 모든 의존성 (예 : 각도 부트 스트랩)을 사용할 수 있어야합니다.

나는 정확한 데이터를 얻을 console.debug($stateParams)$modal.open 전에 마지막 상태에서 그러나 stateParams가 반환되는 $modal.open -method

어떤 힌트를 (상태 I에서오고 있어요) 내에서 수행?

---

편집

관련 상태 CFG :

.state('publications.view', { 
    parent: 'publications.productSelection', 
    url: '/{productSlug:[a-zA-Z0-9-]+}/{docID:[0-9]+}_{slug:[a-zA-Z0-9-]+}', 
    onEnter: ['restFactory', '$state', '$stateParams', '$modal', 
     function(restFactory, $state, $stateParams, $modal) { 
      console.debug($stateParams.docID); 
      $modal.open({ 

       templateUrl: 'partials/publication.html', 
       resolve: { 
        publication: ['restFactory', '$stateParams', 
         function(restFactory, $stateParams) { 
          console.debug($state.params); 
          console.debug($stateParams); 
          return restFactory.view($stateParams.language, $stateParams.productSlug, $stateParams.docID); 
         } 
        ] 
       }, 
       controller: ['$scope', '$sce', 'publication', '$rootScope', 
        function($scope, $sce, publication, $rootScope) { 
         $rootScope.pageTitle = publication.data.data.publication.Publication.title; 
         $scope.publication = $sce.trustAsHtml(publication.data.data.publication.Publication.content); 
        } 
       ] 
      }); 
     } 
    ] 
}); 

Answer 1

당신은의 onEnter 기능으로 현재 $의 stateParams를 주입하여이 문제를 해결하기 일부 서비스 상태로 저장할 수 있습니다 대신 모달 해석에 해당 서비스를 주입하십시오.

는 여기에서 코드를 채택하고있다 : Using ui-router with Bootstrap-ui modal 다음

.provider('modalState', function($stateProvider) { 
    var modalState = { 
     stateParams: {}, 
    }; 

    this.$get = function() { 
     return modalState; 
    }; 

    this.state = function(stateName, options) { 
     var modalInstance; 
     $stateProvider.state(stateName, { 
      url: options.url, 
      onEnter: function($modal, $state, $stateParams) { 
       modalState.stateParams = $stateParams; 
       modalInstance = $modal.open(options); 
       modalInstance.result['finally'](function() { 
        modalInstance = null; 
        if ($state.$current.name === stateName) { 
         $state.go('^'); 
        } 
       }); 
      }, 
      onExit: function() { 
       if (modalInstance) { 
        modalInstance.close(); 
       } 
      } 
     }); 
    }; 
}) 

앱 설정 섹션 방법 몇 가지 예제 코드에 대한

.config(function($stateProvider, $urlRouterProvider, modalStateProvider) { 
    modalStateProvider.state('parent.child', { 
     url: '/{id:[0-9]+}', 
     templateUrl: 'views/child.html', 
     controller: 'ChildCtrl', 
     resolve: { 
      role: function(Resource, modalState) { 
       return Resource.get({id: modalState.stateParams.id}).$promise.then(function(data) { 
        return data; 
       }); 
      } 
     } 
    }); 
}