javascript - example - Modificación de DOM(slideDown/slideUp) con AngularJS y jQuery

animation angularjs example

Question

Estoy intentando implementar una animación slideDown / slideUp con AngularJS. No puedo usar la transición de CSS3 (desafortunadamente) ya que la height está configurada en auto (y no quiero usar la solución de max-height ), por lo que estoy tratando de usar el método slideToggle de jQuery.

Dado el siguiente marcado:

<ul>
    <li ng-repeat="entry in data">
        <span>{{entry.title}}</span>
        <a ng-click="clicked($event)" href>more?</a>
        <p>{{entry.description}}</p>
    </li>
</ul>

Implementé el siguiente método en mi controlador:

$scope.clicked = function($event) {
    var a = jQuery($event.target);
    var p = a.next();
    p.slideToggle();
};

FIDDLE

Incluso si parece funcionar como se esperaba, entendí que la modificación de DOM se realizará exclusivamente dentro de las directivas.

Después de haber leído la documentación de AngularJS (que me parece un poco IMHO), las directivas siguen siendo un poco vagas para mí, así que ¿alguien podría decirme si la siguiente directiva respeta las mejores prácticas de AngularJS o no?

.directive(''testDirective'', [
function() {
    return {
        restrict: ''A'',
        scope: {
            entry: ''=testDirective''
        },
        template: ''<span>{{entry.title}}</span> '' +
                  ''<a ng-click="clicked($event)" href>more?</a>'' +
                  ''<p>{{entry.description}}</p>'',
        link: function(scope, element) {
            var p = jQuery(element.find(''p''));
            scope.clicked = function($event) {
                p.slideToggle();
            };
        }
    };
}])

FIDDLE

¿Podría ser mejorado? ¿Puedo usar jQuery dentro de una directiva? ¿Respeta la separación de preocupaciones ?

Answer 1

Alternativamente, puedes usar $animate AngularJS:

.animation(''.slide'', function() {
    var NG_HIDE_CLASS = ''ng-hide'';
    return {
        beforeAddClass: function(element, className, done) {
            if(className === NG_HIDE_CLASS) {
                element.slideUp(done); 
            }
        },
        removeClass: function(element, className, done) {
            if(className === NG_HIDE_CLASS) {
                element.hide().slideDown(done);
            }
        }
    }
});

Use ng-hide o ng-show para mostrar u ocultar la descripción.

    <li ng-repeat="entry in data">
        <span>{{entry.title}}</span>
        <a ng-click="expand = !expand" href="#">more?</a>
        <p class="slide" ng-show="expand">{{entry.description}}</p>
    </li>

Ver JSFiddle

PS debes incluir jquery y angular-animate.js

Answer 2

Quiero mostrar un ejemplo de cómo se hace esto con ng-if , ya que estuve buscando una solución durante horas y encontré varios enfoques completamente diferentes que funcionan solo con ng-show . Puede usar ng-if vs ng-show si dice que necesita que las directivas se inicialicen solo al hacerse visibles.

Para usar jQuery slideDown / slideUp con ng-if , también puede usar ngAnimate pero usando diferentes ganchos: enter y leave .

app.animation(''.ng-slide-down'', function() {
  return {
    enter: function(element, done) {
      element.hide().slideDown()
      return function(cancelled) {};
    },
    leave: function(element, done) { 
      element.slideUp();
    },
  };
});

<div class="ng-slide-down" ng-if="isVisible">
     I will slide down upon entering the DOM.
</div>

Esto fue sorprendentemente difícil de lograr, incluso probando varios enfoques basados ​​en JS y enfoques solo de CSS. En última instancia, hay un momento y un lugar para las animaciones de jQuery.