Question

我正在使用名为ng-swippy的角度库。我正在构建一个类似火种的界面。我想要做的是，如果有人点击一颗心脏，它会触发与向右滑动相同的功能。如果有人点击“X”，它将触发与向左滑动相同的功能。

网址：http://430designs.com/xperience/black-label-app/deck.php

我在ng-click上点击了一个名为clickLike（）（第214行）的点击功能。这是我的控制器：

angular.module('black-label', ['ngTouch', 'ngSwippy'])
.controller('MainController', function($scope, $timeout, $window) {
    $scope.cardsCollection = [
      {
          thumbnail: 'images/deck/thor_01.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_02.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_03.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_04.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_05.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/thor_06.jpg',
          collection: 'thoroughbred',
      }, {
          thumbnail: 'images/deck/rhap_01.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_02.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_03.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_04.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_05.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/rhap_06.jpg',
          collection: 'rhapsody',
      }, {
          thumbnail: 'images/deck/cha_01.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_02.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_03.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_04.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_05.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/cha_06.jpg',
          collection: 'chalet',
      }, {
          thumbnail: 'images/deck/mod_01.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_02.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_03.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_04.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_05.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/mod_06.jpg',
          collection: 'modern',
      }, {
          thumbnail: 'images/deck/ind_01.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_02.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_03.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_04.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_05.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/ind_06.jpg',
          collection: 'indulgence',
      }, {
          thumbnail: 'images/deck/cnt_01.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_02.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_03.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_04.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_05.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/cnt_06.jpg',
          collection: 'center-stage',
      }, {
          thumbnail: 'images/deck/vin_01.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_02.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_03.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_04.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_05.jpg',
          collection: 'vineyard',
      }, {
          thumbnail: 'images/deck/vin_06.jpg',
          collection: 'vineyard',
      }, 
    ];
    // Do the shuffle
    var shuffleArray = function(array) {
        var m = array.length,
            t, i;
        // While there remain elements to shuffle
        while (m) {
            // Pick a remaining element
            i = Math.floor(Math.random() * m--);
            // And swap it with the current element.
            t = array[m];
            array[m] = array[i];
            array[i] = t;
        }
        return array;
    };
    $scope.deck = shuffleArray($scope.cardsCollection);

    $scope.myCustomFunction = function() {
      $timeout(function() {
        $scope.clickedTimes = $scope.clickedTimes + 1;
        $scope.actions.unshift({ name: 'Click on item' });
      });
    }; //end myCustomFunction

    $scope.count = 0;
    $scope.showinfo = false;
    $scope.clickedTimes = 0;
    $scope.actions = [];
    $scope.picks = [];
    var counterRight = 0;
    var counterLeft = 0;
    var newVar = $scope;
    $scope.swipeend = function() {
        $scope.actions.unshift({ name: 'Collection Empty' });
        $window.location.href = 'theme-default.php';
    }; //endswipeend

    $scope.swipeLeft = function(person) {
        //Essentially do nothing
        $scope.actions.unshift({ name: 'Left swipe' });
        $('.circle.x').addClass('dislike');
        $('.circle.x').removeClass('dislike');
        $(this).each(function() {
            return counterLeft++;
        });
    }; //end swipeLeft

    $scope.swipeRight = function(person) {
      $scope.actions.unshift({ name: 'Right swipe' });
      // Count the number of right swipes
      $(this).each(function() {
          return counterRight++;
      });

      $scope.picks.push(person.collection);
      // Checking the circles
      $('.circle').each(function() {
          if (!$(this).hasClass('checked')) {
              $(this).addClass('checked');
              return false;
          }
      });
      $('.icon-like').addClass('liked');
      $('.icon-like').removeClass('liked');
      if (counterRight === 4) {
          // Calculate and store the frequency of each swipe
          var frequency = $scope.picks.reduce(function(frequency, swipe) {
              var sofar = frequency[swipe];
              if (!sofar) {
                  frequency[swipe] = 1;
              } else {
                  frequency[swipe] = frequency[swipe] + 1;
              }
              return frequency;
          }, {});
          var max = Math.max.apply(null, Object.values(frequency)); // most frequent
          // find key for the most frequent value
          var winner =Object.keys(frequency).find(function (element) { return frequency[element] == max; });
          $window.location.href = 'theme-' + winner + '.php';
      } //end 4 swipes
    }; //end swipeRight

    $scope.clickLike = function() {
      $currentTarget.toggleClass('happy');
    }; //clickLike
});

我可以触发点击，但是我丢失了我需要传递给它的对象person。我需要通过我希望这是有道理的。我一直在努力解决这个问题几天，似乎无法得到答案。

提前致谢。任何和所有的帮助表示赞赏！

Answer 1

在这种情况下，我总是使用服务或工厂来传递数据：

angular.module('main').service('passDataService', function () {
var DataList = [];    

var setObjectData = function (Data) {
    DataList.push(Data);
};

var getObjectData = function () {
    return DataList;
};

var resetObjectData = function () {
    DataList = [];       
};


return {
    setObjectData : setObjectData ,
    getObjectData : getObjectData ,
    resetObjectData : resetObjectData 
};

});

在控制器中添加 passDataService 作为依赖项并设置/获取数据，如：

passDataService.setObjectData (yourData); //Set
var getObject = passDataService.getObjectData (); //get

这样，无论您使用哪种控制器或使用何种方法，都可以随时保存并传递数据。

单击另一个函数

1 个答案: