Pass Parameter in ui-Ansicht

Question

Ich versuche Parameter in verschachtelter ui-Ansicht zu übergeben:

<ui-view user="user"></ui-view> 

Und jetzt lassen Sie mich erklären, warum ich das tun müssen. Das ist, wie meine ui wie folgt aussieht:

Es Benutzerkarte Angular Komponente ist. Innerhalb dieser Komponente gibt es mehrere Registerkarten wie Unterkomponenten mit eigenen Zuständen. Mein Ziel ist es, Benutzerobjekt für die Registerkarten bieten aus dem übergeordneten Zustand.

Lassen Sie mich auch etwas vereinfachte Code:

.state('user', { 
    url: '/user/:userId', 
    template: `<user user-id="userId"></user>`, 
    controller: ($scope, $stateParams) => { 
     $scope.userId = +$stateParams.userId; 
    } 
    }) 
    ... 
    .state('user.tab1', { 
    url: '/tab1', 
    template: '<tab1 user="$ctrl.user"></tab1>', 
    controller: ($scope, $state) => { 
     //I would like to get access to the user object here 
     let course = $scope.$ctrl.user; 
    } 
    }); 

So ein weiteres Mal: ​​Benutzerobjekt nicht in ui-Router-Controller, aber Steuerung der Komponente geladen. Template dieser Komponente hat geschachtelt, in dem ich Benutzerobjekt haben möchte.

Answer 1

Ich fand, dass ui-Router nicht isoliert Rahmen schafft für Kind heißt es, so können Sie sie einfach durch

Zugang

$scope.$ctrl.youparentproperty 

und es ist in meinem Fall:

.state('user.tab1', { 
    url: '/tab1', 
    template: '<tab1 user="$ctrl.user"></tab1>', 
}); 

und der Plünderer mit Beispiel, wenn jemand anderes mit dem gleichen Problem kämpft - https://plnkr.co/edit/9LSNtWWcom6ERZRBucXB?p=preview

Answer 2

Sie können das übergeordnete Element eines Status über die parent-Eigenschaft angeben.

.state('user', { 
     url: '/user/:userId', 
     template: `<user user-id="userId"></user>`, 
     controller: ($scope, $stateParams) => { 
      $scope.userId = +$stateParams.userId; 
     } 
     }) 
     ... 
     .state('user.tab1', { 
     url: '/tab1', 
     parent: 'user', 
     template: '<tab1 user="$ctrl.user"></tab1>', 
     controller: ($scope, $state) => { 
      //In order to access the scope of a parent controller in Angular UI Router use: 
      let course = $scope.$parent.user; 
     } 
     }); 

Eine andere Lösung kann Ihre Benutzervariablen in einen Dienst stellen, die Sie in jedem Controller oder setzen im $rootscope zugreifen können.