Question

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

可以使用函数class Home extends StatelessWidget { @override Widget build(BuildContext context) { return new Row( children: <Widget>[ new Expanded(child: new MyCoolWidget()), new Expanded(child: new MyCoolWidget()), ] ) } }，我收到错误消息：

removeClass不是函数

它适用于navigate，所以我不明白为什么删除不能在这里工作。

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>

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。

Answer 2

首先，current变量不是jQLite个实例，因此为了使用removeClass，您必须使用jQLite包装它，如下所示：

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

其次，变量items可能是空的，因为$element.find('.content li')如果使用纯jQLite则无法使用，因为如果是这样，方法{{1将仅限于通过标记名称查找。因此，如果您需要使用该复杂选择器，则应尝试find或使用旧学校$element[0].querySelectorAll('.content li')。

Answer 3

如果你愿意，你可以，而不是使用Javascript操纵类来显示和隐藏你的文本引号，将你的引号传递给你的指令，并让指令本身找出要显示的内容和不显示的内容（可能是更多＆＃34;角度方式＆＃34;做事。）

例如，类似于以下指令：

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

removeClass不是AngularJS指令中的函数

3 个答案: