2016-08-11 1 views
0

UI-Router를 사용하고 있으며 사용자가 '돌아 가기'옵션을 제공하기 위해 상단 탐색 모음의 링크를 업데이트하려고합니다. 그렇지만 논리적 인 단계는 거꾸로. 그들은 클라이언트 편집 페이지에있는 경우 즉, 뒤로 버튼 등, 작업과 같은, 클라이언트 목록에 걸릴 것UI-Router로 사용자 정의 뒤로 버튼

탐색 모음은 '루트'정의 된 상태의 일부입니다 - 최고의 도구 모음을 참조 @root 아래에 있습니다.

.state('root', { 
    abstract: true, 
    url: '', 
    views: { 
     '@': { 
      templateUrl: '../partials/icp_index.html', 
      controller: 'AppController as AppCtrl' 
     }, 
     '[email protected]': { 
      templateUrl: '../partials/left-nav.html' 
     }, 
     '[email protected]': { 
      templateUrl: '../partials/right-nav.html' 
     }, 
     '[email protected]': { 
      templateUrl: '../partials/toolbar.html' 
     } 
    } 
}) 

다른 주에서는 params 옵션을 사용하여 backButton 객체를 채 웁니다.

.run(function($rootScope, NavigationService) { 
    $rootScope.$on("$stateChangeError", console.log.bind(console)); 
    $rootScope.$on("$stateChangeSuccess", function() { 
     $rootScope.backButton = NavigationService.updateBackButton(); 
    }); 
}) 

을 그리고 여기에 서비스 :

.service('NavigationService', function() { 
    this.updateBackButton = function($state) { 
     var backButton = $state.params.backButton; 
     return backButton; 
    } 
}) 

그리고 도구 모음에서, 나는를 사용하여 다음과 같이

.state('root.tasks.detail', { 
    url: '/:taskId/edit', 
    views: { 
     '[email protected]': { 
      templateUrl: '../partials/edit-task.html', 
      controller: 'TaskDetailController as TaskDetailCtrl' 
     } 
    }, 
    params: { 
     backButton: { 
      text: 'Tasks', 
      route: 'root.tasks' 
     } 
    } 
}) 

내 응용 프로그램의 실행 방법, 난, 사용자 정의 서비스를 호출 backButton 객체의 route 속성을 사용하여 다음과 같이 ui-sref를 정의합니다.

ui-sref="{{ backButton.route }}" 

그러나 backButton 개체가 업데이트되지 않는 것 같습니다. 상태가 변경 될 때마다 서비스가 확실히 실행됩니다. 콘솔을 검사하여 확인합니다.

내가이 일을 더 나은 방법이있을 수 있습니다 감사
.state('root.clients.dashboard', { 
    url: '/:clientId/dashboard', 
    views: { 
     '[email protected]': { 
      templateUrl: '../partials/client-dashboard.html', 
      controller: 'ClientDetailController as ClientDetailCtrl' 
     } 
    }, 
    params: { 
     backButton: { 
      'text' : 'Clients', 
      'route' : 'root.clients' 
     } 
    } 
}) 

, 아마도없는 :하지만 내 다른 mutliple 상태 중로 - 다음과 같은 상태로 검색 할 때

이상하게도, 코드가 작동 $ rootScope를 사용하면 이름 자체가 내가 속성을 변경해서는 안된다고 생각하게 만듭니다!

도움을 주시면 감사하겠습니다.

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) { 
     $rootScope.previousState = from; 
    }); 
    }]); 

rootScope은 그래서 놀 affraid하지 말고 그냥 메인 부모 범위입니다 :

답변

0

는 사실 $ rootScope와 쉬운 솔루션이있다. 이전 상태에 대한 로컬 스토리지로도 동일한 작업을 수행 할 수 있습니다.

+0

감사합니다. @dmcissokho하지만 이전 상태를 얻으려고하지는 않지만 (현재 상태를 기반으로) 논리 단계 거꾸로 뒤로 옵션으로 제공됩니다. 그게 텍스트 속성 때문입니다. 그래서 나는 그들이 어디로 돌아갈 지 명확하게 알 수 있습니다. – DJC