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

时间:2017-03-27 10:41:52

标签: angularjs angular-ui-router

我在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'
        })

1 个答案:

答案 0 :(得分: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>

并且,您应该能够使用给定的信息导航到该状态。您可以通过注入contact然后注入contact.details

来访问$stateParams控制器中的$stateParams.contact