programing

Angular ui-router - 상위 템플릿에서 전달된 중첩된 명명된 뷰의 매개 변수에 액세스하는 방법

i4 2023. 3. 27. 21:00
반응형

Angular ui-router - 상위 템플릿에서 전달된 중첩된 명명된 뷰의 매개 변수에 액세스하는 방법

안녕하세요. ui-router 사용 중 컨트롤러 "ViewWorklogCrtl"의 파라미터에 접속하려고 합니다.

기본적으로 부모 템플릿에는 다음이 포함됩니다.

a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show

그 다음 페이지 아래쪽에 있습니다.

section(ui-view="top-section")

다음으로 클라이언트 측 라우팅 정보를 포함한 app.js에는 다음과 같은 정보가 있습니다.

 $stateProvider
.state('instance-ticket', {
  url: '/ticket/:instanceID',
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }
  })

템플릿 로딩은 정상적으로 동작하고 있습니다.해답을 찾을 수 없는 문제 및 질문은 ViewWorkLogCtrl에 접속하여 ui-sref 링크를 통해 전달되는 "testnum"에 액세스하는 방법은 다음과 같습니다.더 나은 방법이 있을까요?

감사합니다!!!

instanceID파라미터로서 선언되어 있기 때문에, 다음과 같이 액세스 할 수 있습니다.

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        $scope.instanceID = $stateParams.instanceID;
        ...

기타 자세한 내용은http://https://github.com/angular-ui/ui-router/wiki/URL-Routing 를 참조해 주세요.

그리고, 에의 요구는ui-sref이래야 한다

<a ui-sref="instance-ticket.worklog({ instanceID:ticket.testnum })" >..

확장:

1) instance라는2개의 파라미터를 취득하고 싶은 경우부모로부터의 ID 2) 현재로부터의 testnum, 이렇게 상태 정의를 조정해야 합니다.

.state('instance-ticket', {
  url: '/ticket/:instanceID',      // instanceID
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  // new param defintion
  url: '/worklog/:testnum',         // testnum
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }

그리고 그ui-sref

<a ui-sref="instance-ticket.worklog({ instanceID:1, ticket.testnum:2 })" >..

다음과 같이 액세스 할 수 있습니다.

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        console.log($stateParams.instanceID)
        console.log($stateParams.testnum)
        ...

저는 이 문제를 해결하기 위한 커스텀 디렉티브를 작성했습니다.

<a my-sref="{{myStateVar}}">awesome link</a>

Github에서 복제할 수 있습니다.https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

언급URL : https://stackoverflow.com/questions/21097820/angular-ui-router-how-to-access-parameters-in-nested-named-view-passed-from

반응형