javascript - removeClass 不是 AngularJS 指令中的函数

Question

我是 AngularJS 中这个指令的新手，需要一些帮助才能让这个 javascript 函数工作。当我只是在 angular 指令之外使用纯 JavaScript 时没问题。但是现在我遇到了一些问题。

在 navigate 函数下没问题，我得到一个错误:

removeClass is not a function

它适用于 addClass 所以我不明白为什么 remove 在这里不起作用。

<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

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 Reference - jQLite .