在单个控制器中处理多个项目？ AngularJS答案

【问题标题】：Handle multiple item in single controller? AngularJS在单个控制器中处理多个项目？ AngularJS
【发布时间】：2017-03-22 12:46:41
【问题描述】：

我对 Angular JS 比较陌生。目前我遇到了一个问题，假设我的列表中有 1000 个项目。为了显示每个项目的详细信息，我将传递 items_id 以生成 html 示例（123.html）。在这种情况下，我需要1000个控制器来处理这种情况吗？

控制器

 app.controller('item0001',function($scope,$http,$sce){
    $scope.data = [];
    $scope.details=[];
    $http.get("https://api.com/test/product/0001").then(function(response){  
       var getData = response.data;
       $scope.data.push(response.data);
       $scope.bindHtml = $sce.trustAsHtml(getData.details);
       for(var i = 0; i<getData.specification.length; i++){
           $scope.details.push(getData.details[i]);
       }
    });     
});

    app.controller('item0002',function($scope,$http,$sce){
    $scope.data = [];
    $scope.details=[];
    $http.get("https://api.com/test/product/0002").then(function(response){  
       var getData = response.data;
       $scope.data.push(response.data);
       $scope.bindHtml = $sce.trustAsHtml(getData.details);
       for(var i = 0; i<getData.specification.length; i++){
           $scope.details.push(getData.details[i]);
       }
    });     
});

查看

<p>
<a href="{{items.id}}.html" role="button">View More</a>
</p>

【问题讨论】：

绝对不是，只有一个视图和控制器，并使用查询字符串或路径变量在控制器内部处理。
@imprezzeb 感谢您的快速回复。但这是否意味着我仍然需要创建 1000 个不同的 ID html 文件但只有一个控制器？
不只是定义单一视图（HTML）。
不是我的头，但阅读自定义元素/指令会很有用。将在标记中写入<customProduct pid="numberAsNgRepeatVarHere"></customProduct> 的内容。然后你会在数组中的每个产品编号上或周围放置一个 ng-repeat。最后，我认为从控制器进行实际调用是一种反模式——可能创建一个接受 pid 并进行实际调用的“getProduct”服务，并通过承诺或东西。
是的，我同意@anied，使用工厂来定义你所有的 http 调用，并在你的控制器中使用该服务/工厂方法。

标签： javascript angularjs

【解决方案1】：

使用单个控制器和 HTML。

将 HTML 与一些 ViewModel 绑定（$scope 上的一个属性）

从您的控制器发出调用以使用服务获取项目详细信息（我假设您已通过单击某个按钮获取这些详细信息）。

在服务的成功回调中更新视图模型。和 angular 使用 2-way 绑定，将使用获取的最后一个项目更新视图。

控制器：

app.controller('ProductCtrl', function($scope, ProductService) {
  var getProduct = function(productId) {
    ProductService.getProduct(productId).then(function(response) {
      $scope.productDetails = response.data;
    })
  };
});

服务：

app.factory('ProductService', function($http) {
  return {
    getProduct(productID) {
      return $http({
        method: 'GET',
        url: "https://api.com/test/product/" + productID
      });
    };
  }
});

HTML 视图：

<body ng-controller="ProductCtrl">
  <div ng-init="getProduct(0001)">
    <p>Name {{productDetails.name}}</p>
    <p>ID {{productDetails.id}}</p>
    <p>Description {{productDetails.description}}</p>
  </div>
  <button ng-click="getProduct(productDetails.id + 1)">Get Next Product</button>
</body>

我希望这能让您大致了解如何实现您的要求。请详细说明您的问题，以便我提供更具体的解决方案。

【讨论】：

【解决方案2】：

定义一个视图 (html) 和控制器来处理这个......下面的例子。

productDetails.html（查看）

<div>
  <span>{{productName}}</span>
</div>

productDetails.js（控制器）

app.controller('productDetailsCtrl',function($scope,$http,$sce){
    $scope.productName = "";        
    $http.get("https://api.com/test/product/0001").then(function(response){  
       var getData = response.data;
       $scope.productName = getData.productName;       
    });     
});

【讨论】：