Teilen von Daten von den Eltern auf das Kind Stand mit Angular-UI-router

Basierend auf dieser tutorial, ich habe als meine Eltern Stand eine Liste von Personen. Wenn ich auf eine von Ihnen, eine neue Sicht wird erstellt, um zu zeigen Sie die details für diese person. In meiner URL nutze ich die ID für diese person, so ist es ziemlich einfach zu gehen und Holen die ID verwendet werden, in den kindlichen Zustand. Das problem ist, dass ich auch wollen, um Informationen wie name, e-mail, Alter, etc.

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 der controller für die Menschen:

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

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

}]);

Dann der controller für eine 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 die HTML 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, was ich kann nicht scheinen, um zu gehen von den übergeordneten staatlichen

Ich habe versucht, mit Lösungen wie diese, dass $state.go oder diese, dass params, aber es gibt mir immer Fehler wie param values not valid for state oder die Variablen sind undefiniert.

Keine Lösung für dieses problem?

  • haben Sie eine API zum anzeigen der details von den Studenten?

 

2 Replies
  1. 3

    Können Sie verwenden eckige Zustand resolve, um Ihre Anforderung in einem besseren Weg. Zwar gibt es viele Möglichkeiten für Sie.

    Verfahren:

    1. Wenn Ihr übergeordneten staatlichen Lasten, Fragen Sie alle Leute in einen API-Aufruf.
    2. In dieser Antwort, ich bin die Zuordnung der Antwort auf eine Instanz eines Dienstes mit studentService.addStudents($scope.students); wo addStudents ist eine Funktion im service.
    3. Nun, wenn Sie navigieren, um die Details einer person, die ich verwendet habe lösen, die liest die gespeicherten Daten aus dem service mit der Funktion studentService.getStudents() und gibt einen person Objekt an den controller.
    4. Verwenden, die person-Objekt direkt in die person controller durch die Injektion der beheben variable

    Ich lieber mit resolve. Ich werde Ihnen 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;
          });
        }
      }

    Fügen Sie ein service studentService oder erweitern Sie Ihre eigenen service.

    Service:

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

    Fügte ich addStudents und getStudents Methoden zu es.

    Eine Methode hinzufügen, die Schüler zu array und die anderen bekommen die Daten von einem studenr.

    Menschen-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 zugewiesen $scope.students auf die service-Instanz.

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

    Sie können nun mit student von beheben in den controller, wie eine Abhängigkeit.

    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 student-Objekts in der Ansicht:

    Anzeigen:

    <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>

    hier ist der Grund, warum ich lieber mit Entschlossenheit und seine Vorteile

    • Es gibt student als undefined
    • außerdem sagt er, Error: [$injector:unpr] Unknown provider: studentProvider <- student <- Person_Controller
    • Ich habe es behoben. Es war ein Konflikt zwischen dem deklarierten Controller. Es gibt keine Notwendigkeit zu erklären, die ng-controller="Person_Controller" in die div, weil die Bindung zwischen der Vorlage und der controller ist bereits geschehen in den Staat.
    • okay, ich war dort 12 Stunden, so wurde es nun behoben?
    • Ja, es ist. Danke.
    • Es gibt nur wenige ändern, müssen Sie integrieren nach Winkel-1.6 Version.. Aufgelöst Parameter nicht verfügbar directory-controller. Stattdessen müssen Sie verlängern $onInit wie beschrieben in toddmotto.com/angular-1-6-is-here#component-and-oninit

  2. 0

    Können Sie T-pass-ein großes Objekt mit verschachtelten Eigenschaften mit $Status.gehen. Sie können Ereignis: broadcast-aussenden. Erstellen eines service, halten und freigeben von Daten-Controller ist der bessere Weg.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.