将JSON ID键插入到ng-click指令中，然后将其传递到另一个控制器

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.

应用程序的这个部分显示了用户任务的最小信息。当他们点击“查看详细信息”按钮时，它会将他们带到一个页面，该页面基于is ID提供关于特定汽车的更多信息。

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

这里有一张图片来解释我所说的第一部分:

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

这是我的角码:编辑-添加的ui-路由器代码。

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);
  });
}

EDIT - Button HTML:

编辑- HTML按钮:

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

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

正如您所看到的，每辆车都有自己的唯一ID(当然)。我可以使用:

ng-repeat="task in mainTask.Tasks"

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

But I need this to do two things:

但我需要做两件事:

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.
当用户单击View按钮时，我需要它将它们带到另一个名为car_details.html的页面。该页面将使用“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:
当用户单击相同的按钮时，我需要以某种方式将该汽车的特定ID({{任务['CAR ID']})显示在该tile中，然后以某种方式将其传递给该位置的carDetails函数，该函数表示:

$http.get( API + '/car/THE CAR ID' )
美元http。获取(API + '/car/THE car ID')

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.

当“汽车ID”需要将ID传递给它的时候，它的“查看细节”按钮就被点击了。所以当car_details。打开html页面，它将会为那辆车装载所有正确的内容。

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.

编辑-路由在主html文件和ui-view中很好地工作。但是我不知道如何在每次单击tile的“视图细节”按钮时，从每个花砖JSON ID键传递唯一的ID。

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

我希望我讲得够清楚。如果还没有，请告诉我，我会给你更多的信息。

Thanks for the help!

谢谢你的帮助!

5 个解决方案

#1

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.

有两种常见的处理方法(据我所知)。第一个、最流行、最推荐的方法是使用服务或工厂。另一种方法是使用路由器和routeParams将卡的ID传递给details控制器。

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.

我不知道你打算显示详细信息页面(使用路由器导航到一个新的页面,或指令只是隐藏/显示一些隐藏的DOM元素),但在这两种情况下都可以使用服务/工厂,在那里routeParams只能用于一个。

(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)

(我也强烈建议您尽可能地遵循这里的棱角样式指南:https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md，如果您想避免很多头痛的话)

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;
  });
}

And your ng-repeat would look somthing like this:

而你的g-repeat会是这样的:

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

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

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

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

另一种方法是使用$routeParams。相关的文档如下:https://docs.angularjs.org/api/ngroute/service/$ routeParams

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

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

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;
  });
}

5 个解决方案

#1

更多相关文章

随机推荐