Javascript 单击另一个函数,从中发射角度函数

Javascript 单击另一个函数,从中发射角度函数,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在使用一个叫做ng swippy的有角度的库。我正在构建一个类似火绒的界面。我想做的是,如果有人点击一颗心脏,它将触发与向右滑动相同的功能。如果有人点击“X”,它将启动与向左滑动相同的功能 网址: 我有一个名为clickLike()的click函数(第214行),在ng click时启动。这是我的控制器: angular.module('black-label', ['ngTouch', 'ngSwippy']) .controller('MainController', function(

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

网址:

我有一个名为clickLike()的click函数(第214行),在ng click时启动。这是我的控制器:

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
。我需要通过考试,我希望这是有意义的。我已经为此苦苦挣扎了几天,似乎找不到答案


提前谢谢。感谢您的任何帮助

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

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

这样,无论您是哪个控制器或调用什么方法,都可以始终保留和传递数据

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

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

这样,无论您是哪个控制器或调用什么方法,都可以始终保留和传递数据

我们不会将jQuery操作混合到AngularJS中。您的swipeLeft和swipeRight是在jQuery中实现的。您能在控制器的某个地方设置$scope.person,然后
$scope.clickLike=function(){$scope.swipeRight($scope.person);}
?我肯定很快就学会了这一点。但是,
$scope.person
在调用滑动功能之前不可用。这就是我面临的问题。
person
对象在$scope中的任何位置都不可用,除非您向右或向左滑动。好的,我现在明白了。谢谢你或者澄清一下。因此,ng swippy必须提供向左和向右滑动的api。属性
swipe right=swipeRight(person)
仅在发生刷卡后才返回。看他们的源代码我不知道;我看不到任何编程滑动的方法。我对plnkr做了一些改进,但需要太多的依赖项、图像等。我们不会将jQuery操作混合到AngularJS中。您的swipeLeft和swipeRight是在jQuery中实现的。您能在控制器的某个地方设置$scope.person,然后
$scope.clickLike=function(){$scope.swipeRight($scope.person);}
?我肯定很快就学会了这一点。但是,
$scope.person
在调用滑动功能之前不可用。这就是我面临的问题。
person
对象在$scope中的任何位置都不可用,除非您向右或向左滑动。好的,我现在明白了。谢谢你或者澄清一下。因此,ng swippy必须提供向左和向右滑动的api。属性
swipe right=swipeRight(person)
仅在发生刷卡后才返回。看他们的源代码我不知道;我看不出有任何方法可以通过程序滑动。我对你的plnkr做了一点改进,但是有太多的依赖项需要图像等,我真的很喜欢这个想法。然而,一般来说,我对棱角比较陌生。我不确定如何获得
person
对象,因为它不适用于任何函数。只有2个滑动功能。我正在使用的库以这种方式设置。这将不起作用。因为@lz430想要实现的是像用户手动刷卡一样刷卡。我非常喜欢这个想法。然而,一般来说,我对棱角比较陌生。我不确定如何获得
person
对象,因为它不适用于任何函数。只有2个滑动功能。我正在使用的库以这种方式设置。这将不起作用。因为@lz430想要实现的是像用户手动刷卡一样刷卡。