web-dev-qa-db-ja.com

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内およびViewWorkLogCtrl内で渡される "testnum"にアクセスする方法です。この？

どうもありがとう！

javascriptangularjsnestedangular-ui-router
59
hzane

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の2つのパラメーターを取得したい場合、このように状態定義を調整する必要があります

.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)
        ...
105
Radim Köhler

この問題を解決するためのカスタムディレクティブを作成しました。

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

Githubからクローンを作成できます： https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

4
Jens Eger