Используя Angular, как мне привязать событие клика к элементу и щелкнуть, сдвиньте элемент sibling вниз и вверх?

Я работаю с 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');
    }

}]);

Пока это работает как ожидалось, но я не знаю, как выполнить слайд. Любая помощь очень ценится.

Update

Я заменил то, что у меня было с директивой.

Моя разметка теперь выглядит так:

<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. Любые предложения?

Ответ 1

Я не уверен точно о поведении, о котором вы говорите, но я бы посоветовал вам подумать немного по-другому. Меньше jQuery, больше angular.

То есть, у вашего html что-то вроде этого:

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

Затем вы можете использовать сборку в ng-animate, чтобы сделать слайд-сиблинг - 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;
  }

});

Этот вид компонента также является основным кандидатом на директиву, который будет аккуратно упаковать его.

Ответ 2

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 и обойти проблему не зная, в каком контексте используется эта директива. Существует много возможных способов решения этих проблем, хотя ни одна из проблем не будет остановить его от функциональной работы, которую они заслуживают внимания ради повторного использования, стабильности, тестирования и т.д.

Ответ 3

По этой ссылке: https://docs.angularjs.org/api/ng/function/angular.element

Элемент AngularJs в вашем фрагменте кода представляет объект JQuery DOM для связанного элемента. Если вы хотите использовать JQuery-функции, вы должны использовать библиотеку JQuery до загрузки angular. Для более подробной информации, пожалуйста, перейдите по ссылке выше.

Ответ 4

Лучшая практика:

<div ng-if="view"></div>

$scope.view = true;

$scope.toggle = function(){
  $scope.view = ($scope.view) ? false : true;
}