使用Angular，如何将单击事件绑定到元素，并在单击时上下滑动兄弟元素？
我正在使用Angular，我在做一些我通常使用jQuery做的事情时遇到了麻烦。
我想要将一个click事件绑定到一个元素上，然后在单击时，上下滑动一个同级元素。
这是jQuery的样子：
$('element').click(function() {
$(this).siblings('element').slideToggle();
});使用Angular，我在我的标记中添加了一个带有函数的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();
});
}
}
});然而，我仍然不能让滑动开关工作。我不相信Angular支持slideToggle()。有什么建议吗？
回答 4
Stack Overflow用户
发布于 2014-03-13 02:25:28
我不太确定你所说的行为，但我鼓励你以一种稍微不同的方式思考。更少的jQuery，更多的角度。
也就是说，让你的html像这样：
<div ng-click="visible = !visible"></div>
<div ng-show="visible">I am the sibling!</div>然后，您可以使用ng-animate中的build来制作兄弟幻灯片- yearofmoo对$animate的工作原理有一个很好的概述。
这个示例非常简单，您可以将显示逻辑放入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;
}
});这种类型的组件也是指令的主要候选者，它可以整齐地打包所有内容。
Stack Overflow用户
发布于 2014-03-13 02:26:12
app.directive('slideMySibling', [function(){
// Runs during compile
return {
// name: '',
// priority: 1,
// terminal: true,
// scope: {}, // {} = isolate, true = child, false/undefined = no change
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller) {
iElm.bind("click", function(){
$(this).siblings('element').slideToggle();
})
}
};
}]);用法应该是这样的
<div slide-my-sibling><button>Some thing</button></div><div>Some sibling</div>注上面的所有“代码”只是为了举例，并没有经过实际测试。
http://plnkr.co/edit/qd2CCXR3mjWavfZ1RHgA
这是一个示例Plnkr，尽管如评论中所提到的，这不是一个理想的设置，因为它仍然使用javascript来假设视图的结构，所以理想情况下，您可以使用一些指令(其中一个需要另一个)或通过使用事件(参见$emit，$broadcast，$on)来实现这一点。
您还可以让该指令通过JavaScript“以编程方式”创建子指令，并避免不知道该指令在什么上下文中使用的问题。有很多解决这些问题的潜在方法，尽管这些问题都不会阻止它在功能上工作，但为了可重用性、稳定性、测试等，它们是值得注意的。
Stack Overflow用户
发布于 2015-06-20 13:44:37
根据此链接：https://docs.angularjs.org/api/ng/function/angular.element
代码片段中的AngularJs元素表示相关元素的JQuery DOM对象。如果你想使用JQuery函数，你应该在角度加载之前使用JQuery库。更多详细信息，请点击上面的链接。
https://stackoverflow.com/questions/22360215
复制相似问题