removeClass не является функцией в директиве AngularJS

Question

Я новичок в этой директиве в AngularJS, и мне нужна помощь, чтобы эта функция javascript работала. Это было нормально, когда я просто использовал простой JavaScript вне угловой директивы. Но сейчас я столкнулся с некоторыми проблемами.

Ничего страшного, до функции navigate, и я получаю сообщение об ошибке:

removeClass не является функцией

Он работает с addClass, поэтому я не понимаю, почему удаление не работает здесь.

<ol class="content">
    <li>
        "{{ myData.quotes[0].quote }}"
        <br /> <div class="quoteLine"></div> <span class="boldText"> {{ myData.quotes[0].person }} </span>
    </li>

    <li>
        "{{ myData.quotes[1].quote }}"
        <br /> 
        <div class="quoteLine"></div> <span class="boldText"> {{ myData.quotes[1].person }} </span>
    </li>
</ol>

app.directive('myCarousel', function () {
    return {
        link: function ($scope, $element) {
            var next = $element.find('.next');
            var prev = $element.find('.prev');
            var items = $element.find('.content li');
            var counter = 0;
            var amount = items.length;
            var current = items[0];

            $element.addClass('active')

            function navigate (direction) {
                current.removeClass('current')
                counter = counter + direction

          if (direction === -1 && counter < 0) { 
            counter = amount - 1
          }

          if (direction === 1 && !items[counter]) { 
            counter = 0
          }

              current = items[counter]
              current.addClass('current')
            }

            // go to next quote
            next.on('click', function (ev) {
              navigate(1)
            })

            // go back to previous quote
            prev.on('click', function (ev) {
              navigate(-1)
            })

            navigate(0)
        }
    }
})

Answer 1

Вы можете, если хотите, вместо того, чтобы использовать Javascript для манипулирования классами, чтобы показать и скрыть ваши текстовые кавычки, передать свои кавычки в вашу директиву и получить указание самой директивы, что показывать, а что нет (может бытьболее «угловатый» способ ведения дел).

Например, что-то вроде следующей директивы:

app.directive('myCarousel', function () {
return {
    scope: {
    quotes: '<'
    },
    templateUrl: 'myCarousel.html',
    controllerAs: 'ctrl',
    controller: function($scope) {
    let ctrl = this;

    ctrl.previousQuote = previousQuote;
    ctrl.nextQuote = nextQuote;

    let selectedQuoteId = 0;
    ctrl.selectedQuote = $scope.quotes[selectedQuoteId];

    function previousQuote() {
        if (selectedQuoteId !== 0) {
        selectedQuoteId--;
        ctrl.selectedQuote = $scope.quotes[selectedQuoteId];  
        }
    }

    function nextQuote() {
        if (selectedQuoteId + 1 < $scope.quotes.length) {
        selectedQuoteId++;
        ctrl.selectedQuote = $scope.quotes[selectedQuoteId];  
        }
    }
    }
}
});

И шаблон myCarousel.html:

<div>
<ol class="content">
<li>
    "{{ctrl.selectedQuote.quote}}"
    <br /> <div class="quoteLine"></div> <span class="boldText"> {{ctrl.selectedQuote.person}} </span>
</li>
</ol>
<button ng-click="ctrl.previousQuote()"><</button>
<button ng-click="ctrl.nextQuote()">></button>
</div>

Это выясняет, какой объект котировки выбран в данный момент (selectedQuote), а затем выводит его в шаблон.

Затем вы можете просто передать данные цитаты из любого места.

Если вызаинтересованы, вы можете просмотреть его в действии на этом Plunker: https://plnkr.co/edit/vA80sTdjwClWvF4T4dbd

Answer 2

Метод removeClass является методом jQuery или jQLite .Необработанный элемент должен быть упакован:

var items = $element.find('.content li');
var counter = 0;
var amount = items.length;
var current = items[0];

$element.addClass('active')

function navigate (direction) {
    ̶c̶u̶r̶r̶e̶n̶t̶.̶r̶e̶m̶o̶v̶e̶C̶l̶a̶s̶s̶(̶'̶c̶u̶r̶r̶e̶n̶t̶'̶)̶
    //WRAP raw element
    var $current = angular.element(current);
    $current.removeClass('current')
    counter = counter + direction

Для получения дополнительной информации см. AngularJS angular.element Справочник по API - jQLite .

Answer 3

Во-первых, переменная current не является экземпляром jQLite, поэтому для использования removeClass необходимо обернуть ее jQLite следующим образом:

angular.element(current).removeClass('current')

Во-вторых,переменная items, вероятно, пуста, потому что $element.find('.content li') нельзя использовать таким образом, если вы используете чистый jQLite, потому что если это так, метод find будет ограничен поиском по тегутолько имяПоэтому, если вам нужно использовать этот сложный селектор, вы должны попробовать $element[0].querySelectorAll('.content li') или использовать old school getElementsByClassName.