Question

我有以下代码，我试图切换第一次出现的类。问题是它不起作用，我不知道为什么不这样做。

(function () {
'use strict';

angular.module('someApp')

.directive('eventButton', function () {
    return {
        restrict: 'E',
        scope: {
            eventItemDisplayed: '@'
        },
        transclude: true,
        replace: false,
        template: '<button class="btn btn-default" ng-click="toggleEvent()">{{text}}</button>',
        link: function ($scope, element, attrs) {
            $scope.eventItemDisplayed = false;
            $scope.text = 'Show'
            $scope.toggleEvent = function () {
                element.find('event-details:first').toggleClass('hide-event');
                $scope.eventItemDisplayed = ($scope.eventItemDisplayed) ? false : true;
                if ($scope.eventItemDisplayed) {
                    $scope.text = 'Show';
                } else {
                    $scope.text = 'Hide';
                }
            }
        }
    }
});
})();

HTML如下所示：

<event-button></event-button>
<div class="event-details hide-event">

如果我使用

element.next().toggleClass('hide-element')

然后它工作正常，即它按预期将类添加到元素。我怀疑是因为next（）返回一个元素而find（）返回一个表示类的选择器？

Answer 1

因为类event-details不在里面（不在其子元素中），你找不到find（）的指令元素

下一步工作，因为它是指令元素的下一个兄弟

element.next()将带您到<div class="event-details hide-event">，因为它是<event-button></event-button>的下一个兄弟

角度指令切换类

1 个答案: