Question

我是AngularJS的新手，并且正在使用AngularJS和Material Design开发一个小型联系人应用程序。我想使用$ state.go将包含多个字段的对象（使用ng-click）传递给另一个状态。

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

您的控制器应该是

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

编辑

首先，您无法将Object传递到这样的其他状态，并且配置中几乎没有错误。

您需要使用参数定义路由器配置。还可以考虑使用ID传递到另一个状态，并使用API调用或使用本地存储来检索详细信息。

这是解决方法，我在这里将电话号码视为状态参数，

 .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

Answer 2

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

在AngularJS中使用$ state.go传递对象

2 个答案: