在单个页面上制作一个应用程序的多个不同副本（AngularJS）

Posted 2023-03-10

【中文标题】在单个页面上制作一个应用程序的多个不同副本（AngularJS）

【英文标题】：make several different copies of one app on a single page (AngularJS)

【发布时间】：2016-03-10 16:00:58

【问题描述】：

我有一个简单的应用程序，它从数组中逐一列出“汽车”。当用户单击按钮时，将显示数组中的下一辆车。

控制器：

  var parking = angular.module("parking", []);
  // Registering the parkingCtrl to the parking module
  parking.controller("parkingCtrl", function ($scope) 
    // Binding the car’s array to the scope
    $scope.cars = [
      plate: '6MBV006', 
      plate: '5BBM299', 
      plate: '5AOJ230'
    ];     
    $scope.idx = 0;
    $scope.next = function()  
      $scope.idx = $scope.idx+1;
      if ($scope.idx>=$scope.cars.length) $scope.idx = 0;
    
  );

“视图”：

    <tr ng-repeat="(i,car) in cars" ng-show="i==idx" >
      <!-- Showing the car’s plate -->
      <td>car.plate</td>
    </tr>
<button ng-click="next()">next</button>

如何以这种方式在单个页面上显示多个不同的汽车阵列，每个阵列都有自己的控件（在这种情况下，唯一的控件是“魔术”按钮）？

UPD：当然，我可以创建一个所需的 ng-apps，每个都有自己的控制器副本（“parkingCtrl1”、“parkingCtrl2”...“parkingCtrl10”）。但我想这不是最好的方法:)

【问题讨论】：

你说的是分页吗？ ***.com/questions/10816073/…

没有。我需要在一页上创建一个 nuber（大约 5-10 个）滑块。每个滑块包含不同的数据并独立控制。

【参考方案1】：

好的，所以我会为此构建指令：

(function () 
    'use strict';

    /**
     * @ngdoc directive
     * @description
     *
     */
    angular
            .module('yourModule')
            .directive('cars', cars);

    cars.$inject = [''];

    function cars() 
        return 
            restrict: 'E',
            scope: 
                dataset: '='
            ,
            controller: function ($scope) 
                $scope.next = function () 

                ;
            ,
            template: '<div>\n    <tr ng-repeat="(i,car) in dataset" ng-show="i==idx" >\n        <!-- Showing the car’s plate -->\n        <td>car.plate</td>\n        <td><button ng-click="next()">next</button></td>\n    </tr>\n    \n</div>'
        ;
    
());

控制器：

(function() 
    'use strict';

    angular
            .module('yourModule')
            .controller('carsCtrl', carsCtrl);

    carsCtrl.$inject = ['$scope'];

    function carsCtrl($scope) 

        $scope.yourCarArray = [
            plate: '6MBV006',
            plate: '5BBM299',
            plate: '5AOJ230'
        ];
        $scope.yourCarArray2 = [
            plate: '6MBV006',
            plate: '5BBM299',
            plate: '5AOJ230'
        ];
        $scope.yourCarArray3 = [
            plate: '6MBV006',
            plate: '5BBM299',
            plate: '5AOJ230'
        ];
        $scope.yourCarArray4 = [
            plate: '6MBV006',
            plate: '5BBM299',
            plate: '5AOJ230'
        ];
        $scope.yourCarArray5 = [
            plate: '6MBV006',
            plate: '5BBM299',
            plate: '5AOJ230'
        ];

    

)();

然后在你的 html 文件中放这个指令：

<cars dataset="yourCarArray"></cars>

因为它是一个指令，你可以多次重复使用它，例如：

<cars dataset="yourCarArray2"></cars>
<cars dataset="yourCarArray3"></cars>
<cars dataset="yourCarArray4"></cars>
<cars dataset="yourCarArray5"></cars>

【参考方案2】：

您可以创建一个“滑块”数组：

var parking = angular.module("parking", []);
parking.controller("parkingCtrl", function ($scope) 
  var sliders = [],
    cars1 = [plate: '111', plate: '222', ...],
    cars2 = [plate: '333', plate: '444', ...];

  sliders.push(index: 0, cars: car1);
  sliders.push(index: 0, cars: car2);

  $scope.next = function(sliderIndex)  
    var slider = sliders[sliderIndex];
    slider.index = (slider.index + 1) % slider.cars.length;
  
);

查看

<div class="slider" ng-repeat="slider in sliders">
  <tr ng-repeat="car in slider.cars" ng-show="slider.index===$index" >
    <!-- Showing the car’s plate -->
    <td>car.plate</td>
  </tr>
  <button ng-click="next($index)">next</button>
</div>

【讨论】：

Infaustus 的回答要好得多