angularjs - 使用 Angular，如何将单击事件绑定(bind)到元素并在单击时向下和向上滑动同级元素？

Question

我正在使用 Angular，但在做一些我通常使用 jQuery 的事情时遇到了麻烦。
我想将点击事件绑定(bind)到一个元素，并在点击时向下和向上滑动同级元素。
这就是 jQuery 的样子:

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

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

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

这就是我的 Controller 的样子:

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

    $scope.events = {};

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

}]);

到目前为止，这按预期工作，但我不知道如何完成幻灯片。很感谢任何形式的帮助。
更新
我已经用指令替换了我所拥有的。
我的标记现在看起来像这样:

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

我删除了 Controller 中的内容并创建了一个新指令。

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

但是，我仍然无法使滑动切换正常工作。我不相信 Angular 支持 slideToggle() 。有什么建议么？

Answer 1

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 对 View 的结构做出假设，所以理想情况下，您可以使用一些指令来执行此操作，其中一个需要另一个或使用事件(参见 $emit、$broadcast、$on)。

您还可以让指令通过 JavaScript “以编程方式”创建子代，并避免不知道指令在什么上下文中使用的问题。有很多潜在的方法可以解决这些问题，尽管没有一个问题会阻止它出于可重用性、稳定性、测试等考虑，它们在功能上是值得注意的。