时间戳

首页 > 解决方案 > removeClass 不是 AngularJS 指令中的函数

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

问题描述

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

函数没问题navigate，我得到一个错误：

removeClass 不是函数

它适用，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)
        }
    }
})

标签： javascriptangularjs

解决方案

该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.elementAPI 参考 - jQLite。

推荐阅读