Teilen von Daten von Eltern zu Kind Zustand mit Angular UI-Router

Question

Basierend auf dieser tutorial, habe ich als meine Eltern eine Liste von Personen. Wenn ich auf eines von ihnen klicke, wird eine neue Ansicht erstellt, um die Details für diese Person anzuzeigen. In meiner URL verwende ich die ID für diese Person, daher ist es ziemlich einfach, die ID zu holen, die im Kind-Status verwendet werden soll. Das Problem ist, dass ich auch Informationen wie den Namen übergeben möchten, E-Mail, Alter usw.

Der Code ist wie folgt:

Meine Routen:

angular 
    .module('appRoutes', ["ui.router"]) 
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 


    var TalentForceState_seeProfile = { 
     name: 'students', 
     url: '/seeProfile', 
     templateUrl: 'public/templates/talentforce_template.html', 
     controller: 'People_Controller' 
    } 

    var singleStudent = { 
     name: 'student', 
     parent: 'students', 
     url: '/:personId', 
     templateUrl: 'public/templates/person_template.html', 
     controller: 'Person_Controller' 
    } 

.... 

Dann wird die Controller für Menschen:

talentforceApp 
    .controller('People_Controller', ['$scope', '$state', '$stateParams', 'StudentService', function($scope, $state, $stateParams, StudentService) { 

     StudentService.query().$promise.then(function(data) { 
      $scope.students = data; 
     }); 

}]); 

Dann wird die Steuerung für die Person:

talentforceApp 
    .controller('Person_Controller', ['$scope', '$state', '$stateParams', 'StudentService', function($scope, $state, $stateParams, StudentService) { 

$scope.student_id = $stateParams.personId; 
console.log($stateParams) 
}]); 

Auch

, hier ist der HTML-Code für die Person:

<div ng-controller="Person_Controller"> 
    <h3>A person!</h3> 
     <div>Name: {{student_name}}</div> 
     <div>Id: {{student_id}}</div> 
    <button ui-sref="students">Close</button> 
</div> 

Informationen wie student_name ist das, was ich kann nicht aus dem übergeordneten Zustand

zu passieren scheint habe ich versucht, Lösungen wie this verwenden, die $state.go verwenden oder this, die params verwenden, aber es gibt mir immer Fehler wie param values not valid for state oder die Variablen sind undefiniert.

Jede Lösung für dieses Problem?

Answer 1

Sie können angulars Zustand resolve verwenden, um Ihre Anforderung in einer besseren Weise zu erreichen. Obwohl es viele Möglichkeiten dafür gibt.

Vorgehen:

1. Wenn Ihre Eltern Zustand geladen wird, Sie fragen alle Leute in einen API-Aufruf.
2. In dieser Antwort, ich bin die Antwort auf eine Instanz eines Dienstes mit studentService.addStudents($scope.students);, wobei addStudents ist eine Funktion im Dienst.
3. Wenn Sie nun zu den Details einer Person navigieren, habe ich eine Auflösung verwendet, die die gespeicherten Daten aus dem Service mit der Funktion studentService.getStudents() abruft und ein Objekt an den Controller zurückgibt.
4. Verwenden Sie diese Person Objekt direkt in der Person Steuerung durch die Variable resolve Injizieren

I resolve mit bevorzugen. Ich werde dir sagen warum.

Hier ist die Entschlossenheit, die Sie verwenden können:

resolve: { 
    student: function(studentService, $stateParams) { 
     return studentService.getStudents().find(function(student) { 
     return student.id === $stateParams.personId; 
     }); 
    } 
    } 

Sie fügen Sie einen Dienst studentService oder Sie können Ihren eigenen Service erweitern.

Service:

talentforceApp.service('studentService', function(){ 
    vm = this; 
    vm.students = [] 

    this.addStudents = function(students) { 
     vm.students = students; 
    } 

    this.getStudents = function() { 
     return vm.students; 
    } 
}); 

Ich habe addStudents und getStudents Methoden zu.

Eine Methode Schüler hinzufügen Array und die anderen erhalten die Daten eines Studenten.

Personen-Controller überarbeitet:

talentforceApp 
    .controller('People_Controller', ['$scope', '$state', '$stateParams', 'StudentService', function($scope, $state, $stateParams, StudentService,studentService) { 

     StudentService.query().$promise.then(function(data) { 
      $scope.students = data; 
      studentService.addStudents($scope.students); // this will create a students array in service instance 
     }); 
}]); 

ich $scope.students an die Dienstinstanz zugeordnet.

Routen überarbeitet:

var TalentForceState_seeProfile = { 
    name: 'students', 
    url: '/seeProfile', 
    templateUrl: 'public/templates/talentforce_template.html', 
    controller: 'People_Controller' 
} 

var singleStudent = { 
    name: 'student', 
    parent: 'students', 
    url: '/:personId', 
    templateUrl: 'public/templates/person_template.html', 
    controller: 'Person_Controller', 
    resolve: { 
    student: function(studentService, $stateParams) { 
     return studentService.getStudents.find(function(student) { 
     return student.id === $stateParams.personId; 
     }); 
    } 
    } 
} 

Jetzt können Sie student von Entschlossenheit in Ihrem Controller, als Abhängigkeit verwendet werden.

Person Controller überarbeitet:

talentforceApp 
    .controller('Person_Controller', ['$scope', '$state', '$stateParams', 'StudentService',student, function($scope, $state, $stateParams, StudentService,student) { 
    $scope.student_id = $stateParams.personId; 
    console.log($stateParams) 
    $scope.student = student // this line add student to scope 
    console.log($scope.student) 
}]); 

Überprüfen Sie Ihre Schüler Objekt in der Ansicht:

Ausblick:

<div ng-controller="Person_Controller"> 
    <h3>A person!</h3> 
     {{student}} 
     <div>Name: {{student_name}}</div> 
     <div>Id: {{student_id}}</div> 
    <button ui-sref="students">Close</button> 
</div> 

here is why I prefer to use resolve and its advantages

Answer 2

Sie können ein großes Objekt mit verschachtelten Eigenschaften nicht mit $ state.go übergeben. Sie können Ereignis: Broadcast, emit. Es ist ein besserer Weg, einen Dienst zu erstellen, der Daten an Ihre Controller hält und mit diesen teilt.