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

查看：13
本文介绍了将 JSON ID 密钥插入 ng-click 指令，然后将其传递给另一个控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

应用的这一部分显示用户任务的最少信息.当他们点击查看详细信息"按钮时，他们会将他们带到一个页面，其中包含基于 ID 的特定 CAR 的更多信息.

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

这是我的角度代码:编辑 - 添加了 ui-router 代码

angular.module('ngApp', ['ui.router']).factory('authInterceptor', authInterceptor).constant('API', 'http://myserver.com/ecar/api').controller('task', taskData).controller('carDetails', carDetails).controller('myCars', myCars)//** 编辑 ** 添加我的 UI 路由器代码.config(function($httpProvider, $stateProvider, $urlRouterProvider){$urlRouterProvider.otherwise('/cars');$stateProvider.state('汽车', {网址:'/汽车'，templateUrl: 'cars.html'}).state('carDetails', {url: '/carDetails',templateUrl: 'mycar_details.html',控制器:'carDetails'}).state('任务详情', {url: '/taskDetails',templateUrl: 'task_details.html',控制器:'taskData'}))}功能 carDetails($scope, $http, API) {$http.get( API + '/car/**THE CAR ID**' ).成功(功能(数据){$scope.details = 数据；控制台日志(数据)；});}

编辑 - 按钮 HTML:

 查看详情

如您所见，每个 CAR 都有自己唯一的 ID(当然).我可以使用以下方法显示 ID:

ng-repeat="mainTask.Tasks 中的任务"{{ task['CAR ID'] }}//在 html 中

但我需要这样做来做两件事:

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

  2. 当用户单击同一个按钮时，我需要以某种方式获取显示在该磁贴中的该汽车的特定 ID({{ task['CAR ID'] }})，然后以某种方式将其传递给 carDetails功能在说:

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

其中汽车 ID"需要将汽车的 ID 传递给刚刚单击查看详细信息"按钮的汽车.这样，当 car_details.html 页面打开时，就会为该汽车加载所有正确的内容.

EDIT - 路由在带有 ui-view 的主 html 文件中运行良好.但我只是不知道如何在单击每个图块 JSON ID 键的查看详细信息"按钮时从每个图块传递唯一 ID.

我希望我已经足够清楚了.如果我还没有，请告诉我，我会尽力为您提供更多信息.

感谢您的帮助！

解决方案

有 2 种普遍接受的方法(据我所知)来处理这个问题.第一种、最受欢迎和最强烈推荐的方式是使用服务或工厂.另一种是使用 router 和 routeParams 将卡的 ID 传递给详细信息控制器.

我不知道您打算如何显示您的详细信息页面(使用路由器导航到新页面，或者使用指令来简单地隐藏/显示一些隐藏的 DOM 元素)，但是可以使用服务/工厂两种情况，其中 routeParams 只能用于一种.

(我也强烈建议您尽可能地遵循此处的 angular 风格指南: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'];函数 CarDetailService($http, API) {var CarDetailService = this;CarDetailService.setCar = function(carId) {CarDetailService.carId = carId;};CarDetailService.getCar = function() {返回 $http.get(API + "/car/" + CarDetailService.carId);};}taskData.$inject = ['$scope', '$http', 'API', 'CarDetailService'];函数 taskData($scope, $http, API, CarDetailService) {$http.get( API + '/tasks' ).成功(功能(数据){$scope.mainTask = 数据；控制台日志(数据)；});$scope.selectCar = function(carId) {CarDetailService.setCar(carId);$location.url('/car-details-route');//进入详情页面};}carDetails.$inject = ['$scope', 'CarDetailService'];功能 carDetails($scope, CarDetailService) {CarDetailService.getCar().success(function(details) {$scope.details = 细节；});}

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

{{task['Car ID']}}

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

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

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

angular.module('ngApp', []).config(function($routeProvider) {$routeProvider.when('/car-details-route/:carId', {控制器:'carDetails'，templateUrl: 'car-details.html'});}).controller('task', taskData).controller('carDetails', carDetails);taskData.$inject = ['$scope', '$location'];函数任务数据($scope，$location){$http.get( API + '/tasks' ).成功(功能(数据){$scope.mainTask = 数据；控制台日志(数据)；});$scope.selectCar = function(carId) {$location.path('/car-details-route/'+carId);};}carDetails.$inject = ['$scope', 'API', '$routeParams'];功能 carDetails($scope, API, $routeParams) {$http.get(API + "/cars/" + $routeParams.carId).success(function(details) {$scope.details = 细节；});}

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:

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

EDIT - Button 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:

ng-repeat="task in mainTask.Tasks"

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

But I need this to do two things:

  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.

  2. 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' )

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.

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.

Thanks for the help!

解决方案

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.

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.

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

And your ng-repeat would look somthing like this:

<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.

The other way, is to use $routeParams. The docs for that are here: 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:

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆