使用AngularJS和jQuery修改DOM（slideDown / slideUp）

我正在尝试使用AngularJS实现slideDown / slideUp动画。 我不能使用CSS3的转换（不幸的是），因为height设置为auto （我不想使用max-height解决方法 ），所以我试图使用jQuery的slideToggle方法。

鉴于以下标记：

 
 
 {{entry.title}} more? 
{{entry.description}}
 
  

我在我的控制器中实现了以下方法：

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

小提琴

即使它似乎按预期工作，我也明白修改DOM应该只在指令内完成。

在阅读了AngularJS的文档 （我发现有点轻微恕我直言）后，指令对我来说仍然有点模糊，所以有人能告诉我以下指令是否尊重AngularJS的最佳实践 ？

 .directive('testDirective', [ function() { return { restrict: 'A', scope: { entry: '=testDirective' }, template: '{{entry.title}} ' + 'more?' + '
{{entry.description}}
', link: function(scope, element) { var p = jQuery(element.find('p')); scope.clicked = function($event) { p.slideToggle(); }; } }; }]) 

小提琴

可以改进吗？ 我是否允许在指令中使用jQuery？ 它是否尊重关注点的分离 ？

Answer 1

或者，您可以使用AngularJS的$animate ：

 .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); } } } }); 

使用ng-hide或ng-show显示或隐藏描述。

  
 {{entry.title}} more? 
{{entry.description}}
  

见JSFiddle

PS你必须包括jquery和angular-animate.js

Answer 2

我想展示一个如何使用ng-if完成此操作的示例，因为我正在寻找一个解决方案，几个小时运行到多个完全不同的方法，只适用于ng-show 。 你可以使用ng-if vs ng-show如果你需要在变得可见时初始化指令。

要使用带有ng-if jQuery slideDown / slideUp，您还可以使用ngAnimate但使用不同的钩子： enter和leave 。

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

即使尝试各种基于JS的方法和仅CSS方法，这也难以实现。 最终，jQuery的动画有时间和地点。