我正在使用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();
});
}
}
});
我不太清楚你正在谈论的行为,但我会鼓励你以稍微不同的方式思考.少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;
}
});
这种组件也是一个指令的主要候选者,它将整齐地整理出来.
