分享數據從父母到孩子狀態與角UI的路由器

Question

基於這tutorial，我有我的父母國家的人名單。當我點擊其中一個人時，會創建一個新視圖以顯示該人的詳細信息。在我的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' 
    } 

.... 

然後，控制器適合人羣：

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

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

}]); 

然後，控制器人：

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

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

而且，這裏的人對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信息似乎是我無法從父狀態傳遞

我試圖用解決方案，如this，使用$state.go ，或this，使用params，但它總是給我錯誤，如param values not valid for state或變量未定義。

這個問題的解決方案？

Answer 1

您可以使用角度狀態resolve以更好的方式實現您的要求。雖然有很多選擇。

步驟：

1. 當你的父母狀態的負載，你在查詢API調用所有的人。
2. 在該響應中，我將使用studentService.addStudents($scope.students);將響應分配給服務實例，其中addStudents是服務中的一項功能。
3. 現在，當您導航到某個人的詳細信息時，我使用了使用函數studentService.getStudents()從服務中提取存儲數據的解析，並將person對象返回給控制器。
4. 通過注入決心變量

我更喜歡使用resolve直接用這個人對象的人控制。我會告訴你爲什麼。

這裏是你可以使用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方法吧。

一種方法將學生添加到數組中，另一種方法獲取學生的數據。

人民控制器修訂：

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從決心到控制器中，作爲一個依賴。

人控制修訂：

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

檢查你的學生對象視圖：

查看：

<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

您不能通過$ state.go傳遞具有嵌套屬性的大對象。你可以使用事件：廣播，發射。創建一個保存並共享數據到控制器的服務是一種更好的方法。