在一个页面上制作一个应用程序的几个不同副本(AngularJS)

Question

我有一个简单的应用程序,从阵列中列出一个"汽车".当用户点击按钮时,显示来自阵列的下一辆车.

控制器:

  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-app nuber,每个都有自己的控制器副本("parkingCtrl1","parkingCtrl2"......"parkingCtrl10").但我想这不是最好的方式:)

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