将JSON ID密钥插入ng-click指令，然后将其传递到另一个控制器 [英] Inserting JSON ID key into ng-click directive and then pass that into another controller

问题描述

该应用程序的这一部分显示了用户任务的最小信息。当他们点击查看详细信息按钮时，它会将他们带到一个页面，该页面包含有关该ID的特定CAR的更多信息。

This section of the app shows the minimal information of a user's task. When they click the "view details" button it will take them to a page that has more information about that specific CAR based on is ID.

这是一张帮助图片解释我所说的第一部分：

Here is a pic to help explain the first part of what I am talking about:

这是我的角度代码：编辑 - 添加了ui路由器代码

Here is my angular code: EDIT - Added ui-router code

angular.module('ngApp', ['ui.router'])
.factory('authInterceptor', authInterceptor)
.constant('API', 'http://myserver.com/ecar/api')
.controller('task', taskData)
.controller('carDetails', carDetails)
.controller('myCars', myCars)

 // ** EDIT ** ADDED MY UI-ROUTER CODE
.config(function($httpProvider, $stateProvider, $urlRouterProvider){

  $urlRouterProvider.otherwise('/cars');      

  $stateProvider

  .state('cars', {
    url: '/cars',
    templateUrl: 'cars.html'
  })

  .state('carDetails', {
    url: '/carDetails',
    templateUrl: 'mycar_details.html',
    controller: 'carDetails'
  })

  .state('taskDetails', {
    url: '/taskDetails',
    templateUrl: 'task_details.html',
    controller: 'taskData'
  })
)}

function carDetails($scope, $http, API) {
  $http.get( API + '/car/**THE CAR ID**' ).
  success(function(data) {
    $scope.details = data;
    console.log(data);
  });
}

编辑 - 按钮HTML：

EDIT - Button HTML:

<a ng-click="" ui-sref="carDetails">View Details</a>

正如您所看到的，每个CAR都有自己的唯一ID（当然）。我可以使用以下方式显示ID：

As you can see each CAR has its own unique ID (of course). I can display the ID by using:

ng-repeat="task in mainTask.Tasks"

{{ task['CAR ID'] }} // in the html

但我需要这个要做两件事：

But I need this to do two things:

1. 当用户点击查看按钮时，我需要将它们带到另一个名为car_details.html的页面。该页面将使用carDetails控制器，它将显示CAR的所有信息。

1. When the user clicks the View button I need it to take them to another page titled car_details.html. That page will make use of the "carDetails" controller which will display all the info for the CAR.

当用户点击同一个按钮时我需要以某种方式将该CAR的特定ID（{{task ['CAR ID']}}）显示在该磁贴中，然后以某种方式将其传递给carDetails函数，该函数位于：

When a user clicks that same button I need somehow to take that specific ID of that CAR ( {{ task['CAR ID'] }} ) being displayed in that tile and then somehow pass it to the carDetails function in the spot that says:

$ http.get（API +'/ car / THE CAR ID'）

$http.get( API + '/car/THE CAR ID' )

其中 CAR ID'需要将CAR的ID传递给它，只需单击查看详细信息按钮。这样当car_details.html页面打开时，它将为该车载入所有正确的内容。

Where "THE CAR ID' needs to have the ID passed to it of the CAR who's "view details" button was just clicked. So that when the car_details.html page opens it will have all the correct content loaded for that car.

编辑 - 使用ui-view在主html文件中路由工作良好。但我无法弄清楚如何从每个路由器传递唯一ID单击各自的查看详细信息按钮时，会显示JSON ID键。

EDIT - The routes work good in the main html file with ui-view. But I just cant figure out how to pass the unique ID from each of the tiles JSON ID key when their respective "view details" button is clicked.

我希望我已经足够清楚了。如果我没有，请告诉我，我会尝试为你带来 更多信息。

I hope I have been clear enough. Let me know if I haven't and I will try to give you more info.

感谢您的帮助！

推荐答案

2个普遍接受的方式（我知道）来处理这个问题。第一种，最受欢迎且最受推荐的方式是使用服务或工厂。另一种是使用路由器和routeParams将卡的ID传递给细节控制器。

There are 2 commonly accepted ways (that I know of) to handle this. The first, most popular, and most highly recommended way is to use a service or factory. The other is to use the router and routeParams to pass the ID of the card to the details controller.

我不知道您打算如何显示详细信息页面（使用路由器导航到新页面，或者使用指令隐藏/显示隐藏的DOM） （）元素），但服务/工厂可以在两种情况下使用，其中routeParams只能在一个中使用。

I have no idea how you plan on displaying your details page (either using the router to navigate to a new page, or a directive to simply hide/show some hidden DOM elements), but a service/factory can be used in BOTH situations, where as the routeParams can only be used in one.

（我也强烈建议你遵循，因为尽可能接近角度风格指南： https：// github .com / johnpapa / angular-styleguide / blob / master / a1 / README.md 如果你想为自己节省很多麻烦）

(I also highly recommend you follow, as closely as possible, the angular style guide here: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md if you want to save yourself a lot of headaches)

angular.module('ngApp', [])
.service('CarDetailService', CarDetailService)
.controller('task', taskData)
.controller('carDetails', carDetails);

CarDetailService.$inject = ['$http', 'API'];
function CarDetailService($http, API) {
  var CarDetailService = this;
  CarDetailService.setCar = function(carId) {
    CarDetailService.carId = carId;
  };

  CarDetailService.getCar = function() {
    return $http.get(API + "/car/" + CarDetailService.carId);
  };
}

taskData.$inject = ['$scope', '$http', 'API', 'CarDetailService'];
function taskData($scope, $http, API, CarDetailService) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });

  $scope.selectCar = function(carId) {
    CarDetailService.setCar(carId);
    $location.url('/car-details-route');  //go to details page
  };
}

carDetails.$inject = ['$scope', 'CarDetailService'];
function carDetails($scope, CarDetailService) {
  CarDetailService.getCar().success(function(details) {
    $scope.details = details;
  });
}

你的 ng-repeat 看起来像这样：

<div ng-repeat="task in mainTask.tasks" ng-click="selectCar(task['Car ID'])">
  {{task['Car ID']}}
</div>

该服务是一个单例，这意味着id将通过路由更改和控制器存在而持续存在。

The service is a singleton, meaning that the id will persist through route changes and controller existences.

另一种方式是使用$ routeParams。这方面的文档在这里： https://docs.angularjs.org/api/ngRoute/service / $ routeParams

The other way, is to use $routeParams. The docs for that are here: https://docs.angularjs.org/api/ngRoute/service/$routeParams

$ routeParams允许您将ID添加到路由器读取并传递给控制器​​的路径中：

$routeParams allows you to add your ID into the path which is read by the router and passed to the controller:

angular.module('ngApp', []).config(function($routeProvider) {

  $routeProvider.when('/car-details-route/:carId', {
    controller: 'carDetails',
    templateUrl: 'car-details.html'
  });

})
.controller('task', taskData)
.controller('carDetails', carDetails);


taskData.$inject = ['$scope', '$location'];
function taskData($scope, $location) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });

  $scope.selectCar = function(carId) {
    $location.path('/car-details-route/'+carId); 
  };
}

carDetails.$inject = ['$scope', 'API', '$routeParams'];
function carDetails($scope, API, $routeParams) {
  $http.get(API + "/cars/" + $routeParams.carId).success(function(details) {
    $scope.details = details;
  });
}

这篇关于将JSON ID密钥插入ng-click指令，然后将其传递到另一个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！