Question

我试图通过从一个页面点击到另一个页面来传递对象的索引，但它不起作用。

需要发送索引的页面如下所示

  <div><table>
    <tr data-ng-repeat="profile in profiles">
    <td>{{profile.profileName}}</td><td>{{profile.created}}</td>
    <td>{{$index}}
    <button data-ng-click="showUser($index)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span> Edit </button>
    </table>
</div>

我的app.js看起来像这样

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

app.config(['$routeProvider', function ($routeProvider){
    $routeProvider
    .when("/", {
        templateUrl : "view/Home.html",
        controller : "MainCtrl"
    })
    .when("/NewUser", {
        templateUrl : "view/addUser.html",
        controller : "MainCtrl"
    })
    .when("/ViewUsers", {
        templateUrl : "view/ViewUsers.html",
        controller : "MainCtrl"
    })
    .when("/EditUser", {
        templateUrl : "view/EditUser.html",
        controller : "MainCtrl"
    });
}]);


app.controller('MainCtrl',function($scope,Restangular,$location){
    Restangular.setBaseUrl('webapi');
    var profiles = Restangular.all('profiles');
    $scope.selected;
    // This will query /profiles and return a promise.
    profiles.getList().then(function(profiles) {
      $scope.profiles = profiles;    
      $scope.saveUser=function(){
          $scope.profile.profileName=$scope.profile.firstName+$scope.profile.lastName;
          console.log($scope.profile);
          profiles.post($scope.profile);
     }

      $scope.showUser=function(id){
          console.log(id);
          $scope.selected=id;
          $scope.go('/EditUser');
      }
      $scope.editUser=function(id){
          console.log(id);
          var profile=$scope.profiles[id];
          console.log(profile);
          profile.put();
      }
    });




      $scope.go = function ( path ) {
          $location.path( path );
        };
});

和需要传递的值的页面如下所示

name:<input data-ng-model="profiles[id].profileName" type="text">
date:<input type="text" data-ng-model="profiles[id].created" readonly="readonly">
{{$scope.id}}
<button data-ng-click="editUser(id)">Edit User</button>

有人能给我一些建议吗？

Answer 1

使用网址中的route查询参数配置$routeprovider接受参数，如下所示

.when("/ViewUsers:index", {
    templateUrl : "view/ViewUsers.html",
    controller : "MainCtrl"
});

现在，当您更改视图时，没有名为$scope.go()的方法，您必须使用$location.path()转到视图并使用.search()方法添加查询参数。

app.controller('MainCtrl', function ($scope, $location){
  $scope.showUser=function(id){
      console.log(id);
      $scope.selected=id;
      $location.path('/EditUser/').search({index: id});  // this will create the url as **/EditUser/?index=id**
  }
});

在您想要访问索引的其他控制器中，它在$routeparams对象中可用，如下所示

app.controller('EditCtrl', function ($scope, $routeParams){
  var index = $routeParams.index;   //This has the value passed from the other controller
});

Answer 2

首先，您需要将控制器分开，因为对于所有路径，您使用的是同一个控制器，这不是一个好习惯。你应该使用如下

.when("/ViewUsers/:id", {
    templateUrl : "view/ViewUsers.html",
    controller : "ViewUserCtrl"
});

您的控制器应该看起来像

app.controller('ViewUserCtrl', function ($scope, $routeParams){
  var id = $routeParams.id;   
});

<强> LIVE DEMO

正如我所说，在路由参数中传递数据并不安全。如何有其他替代方案，但这也会导致安全问题。

使用 $ rootScope

在此处 rootScope DEMO

查看我更新的plunker

将点击的元素的索引从一页重复到另一页

2 个答案: