Передача объекта с помощью $ state.go в AngularJS

Question

Я новичок в AngularJS и разрабатываю небольшое приложение для контактов, используя AngularJS и Material Design. Я хотел бы передать объект (используя ng-click), содержащий несколько полей, в другое состояние, используя $ state.go.

Мой HTML выглядит так:

<md-list-item class="md-2-line" ng-repeat="c in contacts" > <img src="../img/user.svg" class="md-avatar"/> <div class="md-list-item-text" ng-click="goToContactInfo(c)" >

Мой код JS:

app.config(function ($stateProvider, $urlRouterProvider) { $stateProvider // configure "contacts" page .state('contacts', { url: "/contacts", templateUrl: "contacts.html", controller: function ($scope, $state) { $scope.contacts = [ { name: "aaa", phone: "555555" }, { name : "bbb" , phone: "666666"} ]; $scope.goToContactInfo = function (contact) { $state.go("contactInfo", contact); }; } }) // configure "contactInfo" page .state('contactInfo', { url: "/contactInfo", templateUrl: "contactInfo.html", controller: function ($scope, $stateParams) { var contactInfo = $stateParams.contact; $scope.name = contactInfo.name; $scope.phone = contactInfo.phone; } })

Я ожидаю, что var contactInfo будет объектом, содержащим name и phone, но вместо этого я получаю undefined.

Answer 1

 $scope.goToContactInfo = function (contact) {                       
     $state.go("contactInfo", {contact}); <-- this
 };


.state('contactInfo', {
               url: "/contactInfo",
               templateUrl: "contactInfo.html",
               params:{ <-- this
                 contact: null
               },
               controller: function ($scope, $state) {
                   var contactInfo = $state.params.contact;
                   alert(contactInfo);
                   $scope.name = contactInfo.name;
                   $scope.phone = contactInfo.phone;
               }
           })

Answer 2

Ваш контроллер должен быть,

controller: function ($scope, $state) {
   var contactInfo = $state.params.contact;
}

EDIT

Прежде всего, вы не можете передать Объект в другое состояние, подобное этому, и в вашей конфигурации мало ошибок.

Вам необходимо определить конфигурацию вашего маршрутизатора с помощью параметра. Также рассмотрите возможность использования идентификатора для перехода в другое состояние и получения сведений с помощью вызова API или использования localstorage.

Вот исправление, я посчитал номер телефона параметром состояния здесь,

 .state('contactInfo', {
       url: "contactInfo/:phone",
       templateUrl: "contactInfo.html",
       controller: function ($scope, $state, $stateParams) {
       console.log('state2 params:', $stateParams);
       var contactInfo = $stateParams.phone;
       console.log(contactInfo);
       alert(JSON.stringify(contactInfo));
       $scope.name = contactInfo.name;
       $scope.phone = contactInfo.phone;
    }
})

и вам нужно передать информацию как,

   $state.go("contactInfo", { phone : contact.phone });

PLUNKER DEMO