将ng-repeat数据传递到角度ui路由器中的另一个状态？

Question

我在 angularjs 中遇到了一些关于 ui-router 的问题。我正在尝试将数据从一种状态传递到另一种状态。

数据：

$scope.MyData = [

{
  "name": "Alice",
  "age": "20",
  "email": "example@example.com"
},

{
  "name": "Bob",
  "age": "20",
  "email": "example1@example.com"
}
];

查看：

  <div ng-repeat="data in MyData" >
        <div>
          <span>Name: {{data.name}}</span>
          <span>Age: {{data.age}}</span>
        </div>
   </div>

当用户点击此 div 时，我想在 contact.details 状态视图中显示点击联系人的电子邮件数据。

控制器：

 .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('contact.list', {
          url: '/contacts',
          templateUrl: 'templates/contact-list.html',
          controller: 'contactCtrl'
        })

        .state('contact.details', {
          url: '/contactdetails',
          templateUrl: 'templates/contact-details.html',
          controller: 'contactCtrl'
        })

Answer 1

你的 contact.details 状态应该有 params 。像这样：

.state('contact.details', {
    url: '/contactdetails',
    params: {contact: null},
    templateUrl: 'templates/contact-details.html',
    controller: 'contactCtrl'
})

把下面的属性放在你想打开上面状态的地方：

<a ... ui-sref="contact.details({contact: data})" ...>...</a>

而且，您应该能够使用给定的信息导航到该状态。您可以通过注入$stateParams 然后使用$stateParams.contact 来访问contact.details 的控制器中的contact