web-dev-qa-db-fra.com

En utilisant Angular, comment lier un événement de clic à un élément et au clic, faire glisser un élément frère vers le bas et vers le haut?

Je travaille avec Angular et j'ai du mal à faire quelque chose pour lequel j'utilise normalement jQuery.

Je veux lier un événement click à un élément et au clic, faites glisser un élément frère vers le bas et vers le haut.

Voici à quoi ressemblerait jQuery:

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

En utilisant Angular J'ai ajouté un attribut ng-click avec une fonction dans mon balisage:

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

Et voici à quoi ressemble mon contrôleur:

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

    $scope.events = {};

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

}]);

Jusqu'à présent, cela fonctionne comme prévu, mais je ne sais pas comment réaliser la diapositive. Toute aide est fortement appréciée.

Mise à jour

J'ai remplacé ce que j'avais par une directive.

Mon balisage ressemble maintenant à ceci:

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

J'ai supprimé ce que j'avais dans mon contrôleur et j'ai créé une nouvelle directive.

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

Cependant, je n'arrive toujours pas à faire fonctionner la bascule de la diapositive. Je ne crois pas que slideToggle () soit pris en charge par Angular. Aucune suggestion?

angularjseventsbindslidebehavior
18
Michael Lynch

Je ne suis pas sûr du comportement dont vous parlez, mais je vous encourage à penser différemment. Moins jQuery, plus angulaire.

Autrement dit, ayez votre html quelque chose comme ceci:

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

Vous pouvez ensuite utiliser la build dans ng-animate pour faire glisser la fratrie - yearofmoo a un excellent aperçu de la façon dont $animate travaux.

Cet exemple est assez simple pour que vous puissiez mettre la logique d'affichage dans le html, mais je vous encourage autrement à en règle générale le mettre dans le contrôleur, comme ceci:

<div ng-click="toggleSibling()"></div>
<div ng-show="visible"></div>

Manette:

app.controller('SiblingExample', function($scope){

  $scope.visible = false;

  $scope.toggleSibling = function(){
    $scope.visible = !$scope.visible;
  }

});

Ce type de composant est également un candidat de choix pour une directive, qui le regrouperait parfaitement.

12
Ed Hinchliffe
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();
      })
    }
  };
}]);

L'utilisation serait quelque chose comme

<div slide-my-sibling><button>Some thing</button></div><div>Some sibling</div>

Notez que tout le "code" ci-dessus est juste à titre d'exemple et n'a pas été réellement testé.

http://plnkr.co/edit/qd2CCXR3mjWavfZ1RHgA

Voici un exemple de Plnkr, mais comme mentionné dans les commentaires, ce n'est pas une configuration idéale car il a toujours le javascript faisant des hypothèses sur la structure de la vue, donc idéalement, vous le feriez avec quelques directives où l'une nécessite l'autre ou en utilisant des événements (voir $ emit, $ broadcast, $ on).

Vous pouvez également demander à la directive de créer les enfants "par programme" via JavaScript et de contourner le problème de ne pas savoir dans quel contexte la directive est utilisée. Il existe de nombreuses façons potentielles de résoudre ces problèmes, mais aucun des problèmes ne l'empêchera de fonctionnellement, ils méritent d'être notés pour des raisons de réutilisation, de stabilité, de test, etc.

5
shaunhusain

Selon ce lien: https://docs.angularjs.org/api/ng/function/angular.element

L'élément AngularJs dans votre extrait de code représente l'objet DOM JQuery pour l'élément associé. Si vous souhaitez utiliser les fonctions JQuery, vous devez utiliser la bibliothèque JQuery avant angular. Pour plus de détails, veuillez consulter le lien ci-dessus.

0
Ravi Kanasagra