angularjs – 使用Angular,我如何将click事件绑定到元素上,并单击后,向下滑动一个兄弟元素？

我正在使用Angular,而我正在做一些我通常使用jQuery的东西.

我想将一个点击事件绑定到一个元素,然后点击,将一个兄弟元素向下滑动.

这就是jQuery的样子：

$('element').click(function() {
    $(this).siblings('element').slidetoggle();
});

使用角度我在我的标记中添加了一个带有功能的ng-click属性：

<div ng-click="events.displaySibling()"></div>

这就是我的控制器的样子：

app.controller('myController',['$scope',function($scope) {

    $scope.events = {};

    $scope.events.displaySibling = function() {
        console.log('clicked');
    }

}]);

到目前为止,这是按预期工作,但我不知道如何完成幻灯片.任何帮助非常感谢.

更新

我已经用指令取代了我所做的一切.

我的标记现在看起来像这样：

<div class="wrapper padding myevent"></div>

我已经删除了我在控制器中的内容,并创建了一个新的指令.

app.directive('myevent',function() {
    return {
        restrict: 'C',link: function(scope,element,attrs) {
            element.bind('click',function($event) {
                element.parent().children('ul').slidetoggle();
            });
        }
    }
});

但是,我仍然无法使幻灯片切换工作.我不相信Slidetoggle()是由Angular支持的.有什么建议么？

我不太清楚你正在谈论的行为,但我会鼓励你以稍微不同的方式思考.少jQuery,更有角度.

也就是说,有你的html这样的东西：

<div ng-click="visible = !visible"></div>
<div ng-show="visible">I am the sibling!</div>

然后,您可以使用ng-animate中的构建来制作兄弟幻灯片 – yearofmoo有一个非常好的概述如何$动画作品.

这个例子很简单,你可以把显示逻辑放在html中,但是我会鼓励你把它放在控制器里,就像这样：

<div ng-click="toggleSibling()"></div>
<div ng-show="visible"></div>

控制器：

app.controller('SiblingExample',function($scope){

  $scope.visible = false;

  $scope.toggleSibling = function(){
    $scope.visible = !$scope.visible;
  }

});

这种组件也是一个指令的主要候选者,它将整齐地整理出来.