program tip

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

radiobox 2020. 12. 8. 07:56
반응형

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'
      }
  }
  })

템플릿 로딩이 올바르게 작동하고 있습니다. 제가 답을 찾을 수없는 문제와 질문은-ui-sref 링크를 통해 ViewWorkLogCtrl 내부에서 전달되는 "testnum"에 액세스하는 방법입니다. 더 나은 방법이 있습니까? 이?

감사합니다 !!!


instanceID매개 변수로 선언, 그래서 우리는 다음과 같이 액세스 할 수 있습니다

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

다른 모든 세부 정보는 https://github.com/angular-ui/ui-router/wiki/URL-Routing 에서 찾을 수 있습니다.

그리고 호출 ui-sref은 다음과 같아야합니다

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

넓히다:

두 개의 매개 변수, 1) 부모로부터 instanceID 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

반응형