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

问题描述

我想把一个点击事件绑定到一个元素上，点击后，向下滑动一个兄弟元素。

这是jQuery的样子：

  $（'element'）。click（function（）{
 $（this）.siblings（'element'）。slideToggle（）; 
}）; 
  

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

 < divng-click =events.displaySibling（）>< / div> 
  

这是我的控制器的样子：

  app.controller（'myController'，['$ scope'，function（$ scope）{
 
 $ scope.events = {}; 
 
 $ scope.events.displaySibling = function（）{
 console.log（'clicked'）; 
} 
 
}]）; 
  

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

更新

我已经替换了我使用的指令。 p>

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

 < 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支持的。任何建议？

解决方案

我不确定你正在谈论的行为，但我会鼓励你以略有不同的方式思考。

就是这样，你的html就是这样的：

 code>< divng-click =visible =！visible>< / div> 
< divng-show =visible>我是兄弟姐妹！< / div> 
  

然后，您可以使用 ng-animate 制作兄弟幻灯片 - yearofmoo 有一个很好的概述，如何 $ animate 的作品。

这个例子很简单，你可以把在html中显示逻辑，但是我会鼓励你一般把它放在控制器中，如下所示：

  < divng-click =toggleSibling（）>< / div> 
< divng-show =visible>< / div> 
  

控制器：

 code> 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，如何将click事件绑定到一个元素上，并单击后，先滑动一个兄弟元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！