Javascript angularJS中用于交换颜色的可逆函数

我有一个返回颜色数组的函数：

default: function () {

    // Get our colours array
    var colours = [service.kits.kit.colour1, service.kits.kit.colour2, service.kits.kit.colour3];

    // If our third colour is blank
    if (!colours[2]) {

        // Is our first or second colour white
        var isWhite = colours[0] === 'ffffff' || colours[1] === 'ffffff';

        // Set our thrid colour
        colours[2] = isWhite ? 'a6a6a6' : 'ffffff';
    }

    // Return our colours
    return colours;
},

然后我用这个：

// Checks to see what colour was selected for Colour 1 and 2 and sets the 3rd colour
var setSelectedColours = function () {

    // Get our default colours
    var colours = service.colours.default();

    // Apply to our selected colours
    service.colours.selected = angular.copy(colours);
    service.colours.selectedLeisure = angular.copy(colours);
};

.directive('colourSwapper', function () {

    return {
        restrict: 'A',
        controller: 'ColourSwapperController',
        link: function (scope, element, attrs, controller) {

            // Get to see if we are working with the leisure colours or not
            var leisurewear = attrs.hasOwnProperty('leisurewear');

            // Create our function
            element.bind('click', function (e) {

                // Apply the scope
                scope.$apply(function () {

                    // Use the algorithm for leisurwear items
                    controller.swapColours(leisurewear);
                });

                // Prevent any other actions
                e.preventDefault();
            });
        }
    };
})

.controller('ColourSwapperController', ['ConfiguratorService', function (shared) {
    var self = this;

    // Assign our private properties
    var defaultColours = shared.colours.default(),
        tempColour,
        leisureColour = '000e31',
        leisureColours = [leisureColour, '001444'];

    // Used to swap the colours for a garment
    self.swapColours = function (leisurewear) {

        // Get our colours
        var colours = leisurewear ? shared.colours.selectedLeisure : shared.colours.selected;

        // If we are leisurewear and colour 1 and 2 are not navy and we don't have a temp colour
        if (leisurewear && leisureColours.indexOf(defaultColours[0]) === -1 && leisureColours.indexOf(defaultColours[1]) === -1 && !tempColour) {

            // Assign our first colour to our temp colour
            tempColour = colours[0];

            // Make our first colour our 
            colours[0] = leisureColour;

            // If we are playingwear or we have a tempColour
        } else {

            // If we have a tempColour
            if (tempColour) {

                // Set our first colour to our tempColour
                colours[0] = tempColour;

                // Reset our tempColour
                tempColour = null;
            }

            // If our last colour is the hightlight colour and we have not swapped, and our first colour is not the same as our second colour
            if (colours[2] === defaultColours[2] && colours[0] === defaultColours[0] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1
                var c1 = colours.shift();

                // Move it to the middle
                colours.splice(1, 0, c1);

                // If our last colour is our highlight colour and we have already swapped
            } else if (colours[2] === defaultColours[2]) {

                // Get our highlight colour
                var h1 = colours.pop();

                // Move it to the middle
                colours.splice(1, 0, h1);

                // If our highlight colour is in the middle and our first colour is actually our second colour, and we our first colour is not the same as our second colour
            } else if (colours[1] === defaultColours[2] && colours[0] === defaultColours[1] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1 and 2
                var c1 = colours.pop();
                var c2 = colours.shift();

                // Swap our colours
                colours.splice(0, 0, c1);
                colours.push(c2);

                // If our hightlight colour is in the middle and our first colour is in the original place, move our hightlight colour back to the last position
            } else if (colours[1] === defaultColours[2]) {

                // If we have a tempColour
                if (tempColour) {

                    // Set our first colour to our tempColour
                    colours[0] = tempColour;

                    // Reset our tempColour
                    tempColour = null;
                }

                // Get colour 2
                var c2 = colours.pop();

                // Insert c2 into the middel
                colours.splice(1, 0, c2);
            }
        }
    };
}])

我有一个用于交换颜色的指令，如下所示：

// Checks to see what colour was selected for Colour 1 and 2 and sets the 3rd colour
var setSelectedColours = function () {

    // Get our default colours
    var colours = service.colours.default();

    // Apply to our selected colours
    service.colours.selected = angular.copy(colours);
    service.colours.selectedLeisure = angular.copy(colours);
};

.directive('colourSwapper', function () {

    return {
        restrict: 'A',
        controller: 'ColourSwapperController',
        link: function (scope, element, attrs, controller) {

            // Get to see if we are working with the leisure colours or not
            var leisurewear = attrs.hasOwnProperty('leisurewear');

            // Create our function
            element.bind('click', function (e) {

                // Apply the scope
                scope.$apply(function () {

                    // Use the algorithm for leisurwear items
                    controller.swapColours(leisurewear);
                });

                // Prevent any other actions
                e.preventDefault();
            });
        }
    };
})

.controller('ColourSwapperController', ['ConfiguratorService', function (shared) {
    var self = this;

    // Assign our private properties
    var defaultColours = shared.colours.default(),
        tempColour,
        leisureColour = '000e31',
        leisureColours = [leisureColour, '001444'];

    // Used to swap the colours for a garment
    self.swapColours = function (leisurewear) {

        // Get our colours
        var colours = leisurewear ? shared.colours.selectedLeisure : shared.colours.selected;

        // If we are leisurewear and colour 1 and 2 are not navy and we don't have a temp colour
        if (leisurewear && leisureColours.indexOf(defaultColours[0]) === -1 && leisureColours.indexOf(defaultColours[1]) === -1 && !tempColour) {

            // Assign our first colour to our temp colour
            tempColour = colours[0];

            // Make our first colour our 
            colours[0] = leisureColour;

            // If we are playingwear or we have a tempColour
        } else {

            // If we have a tempColour
            if (tempColour) {

                // Set our first colour to our tempColour
                colours[0] = tempColour;

                // Reset our tempColour
                tempColour = null;
            }

            // If our last colour is the hightlight colour and we have not swapped, and our first colour is not the same as our second colour
            if (colours[2] === defaultColours[2] && colours[0] === defaultColours[0] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1
                var c1 = colours.shift();

                // Move it to the middle
                colours.splice(1, 0, c1);

                // If our last colour is our highlight colour and we have already swapped
            } else if (colours[2] === defaultColours[2]) {

                // Get our highlight colour
                var h1 = colours.pop();

                // Move it to the middle
                colours.splice(1, 0, h1);

                // If our highlight colour is in the middle and our first colour is actually our second colour, and we our first colour is not the same as our second colour
            } else if (colours[1] === defaultColours[2] && colours[0] === defaultColours[1] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1 and 2
                var c1 = colours.pop();
                var c2 = colours.shift();

                // Swap our colours
                colours.splice(0, 0, c1);
                colours.push(c2);

                // If our hightlight colour is in the middle and our first colour is in the original place, move our hightlight colour back to the last position
            } else if (colours[1] === defaultColours[2]) {

                // If we have a tempColour
                if (tempColour) {

                    // Set our first colour to our tempColour
                    colours[0] = tempColour;

                    // Reset our tempColour
                    tempColour = null;
                }

                // Get colour 2
                var c2 = colours.pop();

                // Insert c2 into the middel
                colours.splice(1, 0, c2);
            }
        }
    };
}])

到目前为止相当直截了当。 交换颜色的功能保存在我的控制器中，如下所示：

// Checks to see what colour was selected for Colour 1 and 2 and sets the 3rd colour
var setSelectedColours = function () {

    // Get our default colours
    var colours = service.colours.default();

    // Apply to our selected colours
    service.colours.selected = angular.copy(colours);
    service.colours.selectedLeisure = angular.copy(colours);
};

.directive('colourSwapper', function () {

    return {
        restrict: 'A',
        controller: 'ColourSwapperController',
        link: function (scope, element, attrs, controller) {

            // Get to see if we are working with the leisure colours or not
            var leisurewear = attrs.hasOwnProperty('leisurewear');

            // Create our function
            element.bind('click', function (e) {

                // Apply the scope
                scope.$apply(function () {

                    // Use the algorithm for leisurwear items
                    controller.swapColours(leisurewear);
                });

                // Prevent any other actions
                e.preventDefault();
            });
        }
    };
})

.controller('ColourSwapperController', ['ConfiguratorService', function (shared) {
    var self = this;

    // Assign our private properties
    var defaultColours = shared.colours.default(),
        tempColour,
        leisureColour = '000e31',
        leisureColours = [leisureColour, '001444'];

    // Used to swap the colours for a garment
    self.swapColours = function (leisurewear) {

        // Get our colours
        var colours = leisurewear ? shared.colours.selectedLeisure : shared.colours.selected;

        // If we are leisurewear and colour 1 and 2 are not navy and we don't have a temp colour
        if (leisurewear && leisureColours.indexOf(defaultColours[0]) === -1 && leisureColours.indexOf(defaultColours[1]) === -1 && !tempColour) {

            // Assign our first colour to our temp colour
            tempColour = colours[0];

            // Make our first colour our 
            colours[0] = leisureColour;

            // If we are playingwear or we have a tempColour
        } else {

            // If we have a tempColour
            if (tempColour) {

                // Set our first colour to our tempColour
                colours[0] = tempColour;

                // Reset our tempColour
                tempColour = null;
            }

            // If our last colour is the hightlight colour and we have not swapped, and our first colour is not the same as our second colour
            if (colours[2] === defaultColours[2] && colours[0] === defaultColours[0] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1
                var c1 = colours.shift();

                // Move it to the middle
                colours.splice(1, 0, c1);

                // If our last colour is our highlight colour and we have already swapped
            } else if (colours[2] === defaultColours[2]) {

                // Get our highlight colour
                var h1 = colours.pop();

                // Move it to the middle
                colours.splice(1, 0, h1);

                // If our highlight colour is in the middle and our first colour is actually our second colour, and we our first colour is not the same as our second colour
            } else if (colours[1] === defaultColours[2] && colours[0] === defaultColours[1] && defaultColours[0] !== defaultColours[1]) {

                // Get colour 1 and 2
                var c1 = colours.pop();
                var c2 = colours.shift();

                // Swap our colours
                colours.splice(0, 0, c1);
                colours.push(c2);

                // If our hightlight colour is in the middle and our first colour is in the original place, move our hightlight colour back to the last position
            } else if (colours[1] === defaultColours[2]) {

                // If we have a tempColour
                if (tempColour) {

                    // Set our first colour to our tempColour
                    colours[0] = tempColour;

                    // Reset our tempColour
                    tempColour = null;
                }

                // Get colour 2
                var c2 = colours.pop();

                // Insert c2 into the middel
                colours.splice(1, 0, c2);
            }
        }
    };
}])

现在，这有点复杂。有3种颜色，它们的排列方式可以使颜色3只能位于位置1和2，但颜色1和2可以位于任何位置

如果颜色用于休闲服，则同样的规则适用于，但在位置0的每一步之间加入另一种颜色（除非已经选择了该颜色并且位于位置1或2）

我的功能运行良好，但它是线性的，如果按下按钮，它将始终朝一个方向运行。我想“想”它去2个方向，所以有一个后退和前进按钮，反向功能

---

有人知道如何对当前函数执行此操作吗？

制作一个存储颜色序列的数组

var colorsOrderSet=[];

当你点击按钮时

var colorChangeNumber = 0;

当它单击时，它应该将信息存储在一个数组中

colorsOrderSet[colorChangeNumber] = colours;

然后将其递增1，以便存储该数字

colorChangeNumber++;

返回函数 将再次单击

ColorChangeNumber--;
colorsOrderSet[colorChangeNumber] = colours;

---

我不明白你的意思。你能设置一个plunker来显示你描述的行为吗？