2016-12-13 3 views
1

У меня есть объект в Angular, который используется в библиотеке, которую я использую. Когда я написал новую функцию, я не могу передать этот же объект. Я не знаю, почему.Угловой объект JS не найден

Объект называется person. Он связан непосредственно в HTML. Объект возвращает всего 2 элемента из массива cardCollection.

Функция, которую я пытаюсь написать, называется clickLike. Я буквально просто хочу, чтобы то же самое происходило, если кто-то щелкнул или проверил вправо. Вы можете увидеть на сайте Dev здесь: http://430designs.com/xperience/black-label-app/deck.php

Вот весь controller.js файл:

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' }); 
     }); 
    }; 

    $scope.count = 0; 
    $scope.showinfo = false; 
    $scope.clickedTimes = 0; 
    $scope.actions = []; 
    $scope.picks = []; 
    var counterRight = 0; 
    var counterLeft = 0; 

    $scope.swipeend = function() { 
     $scope.actions.unshift({ name: 'Collection Empty' }); 
     $window.location.href = 'theme-default.html'; 
    }; //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++; 
     }); 
     // Checking the circles 
     $('.circle').each(function() { 
      if (!$(this).hasClass('checked')) { 
       $(this).addClass('checked'); 
       return false; 
      } 
     }); 

     $('.icon-like').addClass('liked'); 
     $('.icon-like').removeClass('liked'); 

     $scope.picks.push(person.collection); 
     // console.log('Picks: ' + $scope.picks); 
     // console.log("Counter: " + counterRight); 
     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(element => frequency[element] == max); 
      $window.location.href = 'theme-' + winner + '.html'; 

     } //end 4 swipes 
    }; //end swipeRight 

    $scope.clickLike = function() { 
     $scope.swipeRight(); 
    }; //clickLike 
}); 

HTML файл для палубы

<div class="ng-swippy noselect"> 
<div person="person" swipe-directive="swipe-directive" ng-repeat="person in peopleToShow" class="content-wrapper swipable-card"> 
    <div class="card"> 
     <div style="background: url({{person.thumbnail}}) no-repeat 50% 15%" class="photo-item"></div> 
     <div class="know-label">{{labelOk ? labelOk : "YES"}}</div> 
     <div class="dontknow-label">{{labelNegative ? labelNegative : "NO"}}</div> 
    </div> 
    <div class="progress-stats" ng-if="data"> 
     <div class="card-shown"> 
      <div class="card-shown-text">{{person.collection}}</div> 
      <div class="card-shown-number">{{person.subtitle}}</div> 
     </div> 
     <div class="card-number">{{collection.length - (collection.indexOf(person))}}/{{collection.length}}&nbsp; 
     </div> 
    </div> 
    <div class="container like-dislike" > 
    <div class="circle x" ng-click="$parent.$parent.clickDisike()"></div> 
    <div class="icon-like" ng-click="$parent.$parent.clickLike()"></div> 
    <div class="clearfix"></div> 
    </div> 
</div><!-- end person--> 
<div class="clearfix"></div> 

Если я уезжаю что-нибудь, пожалуйста, дайте мне знать.

Заранее благодарен всем!

ответ

0

Я не вижу, как вы получаете peopleToShow:

ng-repeat="person in peopleToShow" 

Возможно, вы хотите, чтобы заменить его:

ng-repeat="person in cardsCollection" 

потому $scope.cardsCollection кажется, где вы храните ваши эскизы.

+0

Вот что я думал. Однако приложение прекрасно работает с человеком 'ng-repeat =" в peopleToShow ". Вот ссылка на библиотеку, которую я использую. https://github.com/B1naryStudio/ng-swippy – lz430

+0

Кажется, что объект 'person' доступен только для методов swipeRight и swipeLeft. – lz430

+1

Если вы открываете 'ng-swippy.js' в инструментах разработчика, вы увидите в строке 148 объект person. – lz430

Смежные вопросы