使用 Angular，如何将单击事件绑定到一个元素，并在单击时上下滑动同级元素? [英] Using Angular, how do I bind a click event to an element and on click, slide a sibling element down and up?

问题描述

我正在使用 Angular，但在做一些我通常使用 jQuery 的事情时遇到了麻烦.

我想将一个点击事件绑定到一个元素，并在点击时向下和向上滑动一个同级元素.

这就是 jQuery 的样子:

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

使用 Angular，我在标记中添加了一个带有函数的 ng-click 属性:

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

app.controller('myController', ['$scope', function($scope) {$scope.events = {};$scope.events.displaySibling = function() {console.log('点击');}}]);

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

更新

我已经用指令替换了我拥有的东西.

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

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

app.directive('myevent', function() {返回 {限制:'C'，链接:函数(范围，元素，属性){element.bind('click', function($event) {element.parent().children('ul').slideToggle();});}}});

但是，我仍然无法使滑动切换起作用.我不相信 Angular 支持 slideToggle().有什么建议吗?

解决方案

我不确定您所谈论的行为是否准确，但我鼓励您以稍微不同的方式思考.更少的 jQuery，更多的棱角.

也就是说，让你的 html 像这样:

<div ng-show="visible">我是兄弟！</div>

然后您可以使用 ng-animate 中的构建来制作同级幻灯片 - yearofmoo 对 $animate 的工作原理有很好的概述.

这个例子很简单，你可以把显示逻辑放在 html 中，但我会鼓励你作为一个规则，把它放在控制器中，像这样:

<div ng-show="visible"></div>

控制器:

app.controller('SiblingExample', function($scope){$scope.visible = false;$scope.toggleSibling = function(){$scope.visible = !$scope.visible;}});

这种组件也是指令的主要候选者，可以将其整齐地打包.

I'm working with Angular and I'm having trouble doing something that I normally use jQuery for.

I want to bind a click event to an element and on click, slide a sibling element down and up.

This is what the jQuery would look like:

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

Using Angular I have added an ng-click attribute with a function in my markup:

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

And this is what my controller looks like:

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

    $scope.events = {};

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

}]);

So far this is working as expected but I don't know how to accomplish the slide. Any help is very much appreciated.

Update

I have replaced what I had with a directive.

My markup now looks like this:

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

I have removed what I had in my controller and have created a new directive.

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

However, I still can't get the slide toggle to work. I don't believe slideToggle() is supported by Angular. Any suggestions?

解决方案

I'm not sure exactly on the behaviour that you're talking about, but I would encourage you to think in a slightly different way. Less jQuery, more angular.

That is, have your html something like this:

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

You can then use the build in ng-animate to make the sibling slide - yearofmoo has an excellent overview of how $animate works.

This example is simple enough that you can put the display logic in the html, but I would otherwise encourage you to as a rule to put it into the controller, like this:

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

Controller:

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

  $scope.visible = false;

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

});

This kind of component is also a prime candidate for a directive, which would package it all up neatly.

这篇关于使用 Angular，如何将单击事件绑定到一个元素，并在单击时上下滑动同级元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！