javascript - 使用 Angular UI 路由器从父状态向子状态共享数据

Question

基于此tutorial ，我有一份人员名单作为我的 parent 。当我单击其中一个时，会创建一个新 View 以显示该人的详细信息。在我的 URL 中，我使用那个人的 ID，所以很容易去获取要在子状态中使用的 ID。问题是我还想传递姓名、电子邮件、年龄等信息。

代码如下:

我的路线:

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

 ....

然后，People 的 Controller :

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

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

}]);

然后，Person 的 Controller :

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

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

此外，这是 Person 的 HTML:

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

像student_name这样的信息我好像不能从parent state传过来

我尝试使用类似 this 的解决方案，使用 $state.go，或 this ，使用 params，但它总是给我错误，例如 param values not valid for state 或变量未定义。

这个问题有什么解决办法吗？

Answer 1

您可以使用 Angular 的状态 resolve 以更好的方式实现您的要求。尽管它有很多选择。

程序:

1. 加载父状态时，您可以查询 API 调用中的所有人。
2. 在该响应中，我将响应分配给使用 studentService.addStudents($scope.students); 的服务实例，其中 addStudents 是服务。
3. 现在，当您导航到一个人的详细信息时，我使用了 resolve，它使用函数 studentService.getStudents() 从服务中获取存储的数据并返回一个 person 对象到 Controller 。
4. 通过注入(inject)resolve变量
直接在person Controller 中使用person对象

我更喜欢使用 resolve。我会告诉你原因。

这是您可以使用的解决方案:

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

您将添加一个服务 studentService 或者您可以扩展您自己的服务。

服务:

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

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

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

我向其中添加了 addStudents 和 getStudents 方法。

一种方法将学生添加到数组中，另一种方法获取学生的数据。

People Controller 已修订:

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

我将 $scope.students 分配给服务实例。

路线修改:

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

现在，您可以将 student 作为依赖项从解析到您的 Controller 中。

个人 Controller 修订:

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

在 View 中检查你的学生对象:

查看:

<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