在另一个 ng-route 页面上显示数组中的特定对象

Question

我正在构建一个项目，我有一堆来自数组的配置文件。一个页面将它们显示为列表，其中每个配置文件都有一个按钮来显示有关它的更多详细信息。

问题是我不知道如何将这个特定的对象数据传递到另一个路由。所以我想知道如何做到这一点。有什么建议么？谢谢

controller.js

var App = angular.module("App", ['ngRoute']);

App.config(function($routeProvider) {
    $routeProvider

        .when('/allprofiles', {
            templateUrl : 'pages/all.profiles.html',
            controller  : 'allProfilesController'
        })

        .when('/profile/:id/', {
            templateUrl : 'pages/profile.html',
            controller: 'profileController'
        })

        .otherwise({redirectTo:'/allprofiles'});
});

App.factory('Allprofiles', function(){
  return [
    {name: "Adam", role: "Photographer", photo: "img/team/2.jpg", id:"1"},
    {name: "John", role: "Musician", photo: "img/team/3.jpg", id:"2"},
    {name: "Sam", role: "Actor", photo: "img/team/1.jpg", id:"3"},
    {name: "Rachel", role: "Web Developer", photo: "img/team/3.jpg", id:"4"},
    {name: "Joe", role: "Dancer", photo: "img/team/2.jpg", id:"5"},
    {name: "Francis", role: "Psychology", photo: "img/team/1.jpg", id:"6"}
  ]
})

App.controller('allProfilesController', function($scope, $route, $location, Allprofiles) {
  $scope.profiles = Allprofiles;
})

App.controller('profileController', function($scope, $route, $location) {

})

Answer 1

您可以使用$routeParams,

在第二个控制器中检索 routerParams 作为，

app.controller("profileController", function($scope, $routeParams) {
  $scope.id = $routeParams.id;
  $scope.name = $routeParams.name;   
});

演示

var app = angular.module('demo', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      template: "HI this is home Screen",
        controller: 'allProfilesController'
    })
    .when('/profile/:id', {
      templateUrl: "template.html",
      controller: 'profileController'
    })
    .otherwise({
      redirectTo: '/home'
    })
}]);

app.controller("profileController", function($scope, $routeParams) {
  $scope.id = $routeParams.id;
  $scope.name = $routeParams.name;
   
});

app.factory('Allprofiles', function(){
  return [
    {name: "Adam", role: "Photographer", photo: "img/team/2.jpg", id:"1"},
    {name: "John", role: "Musician", photo: "img/team/3.jpg", id:"2"},
    {name: "Sam", role: "Actor", photo: "img/team/1.jpg", id:"3"},
    {name: "Rachel", role: "Web Developer", photo: "img/team/3.jpg", id:"4"},
    {name: "Joe", role: "Dancer", photo: "img/team/2.jpg", id:"5"},
    {name: "Francis", role: "Psychology", photo: "img/team/1.jpg", id:"6"}
  ]
})
app.controller('allProfilesController', function($scope, $route, $location, Allprofiles) {
  $scope.profiles = Allprofiles;
})

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="demo" ng-controller="allProfilesController">

  <h3>Hello, </h3>
  <div ng-repeat="profile in profiles">
    <ul>
      <li>{{profile.name}}</li>
      <li><a href="#profile/{{profile.id}}">Detail</a></li>
    </ul>
  </div>
  <hr/>
  <h1 ng-view=""></h1>
</body>

</html>

在另一个 ng-route 页面上显示数组中的特定对象

Display a specific object from array on another ng-route page

javascript

controller

angularjs

angularjs-ng-route