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

问题描述

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

I'm trying to implement a slideDown/slideUp animation with AngularJS. I can't use CSS3's transition (unfortunately) since the height is set to auto (and I don't want to use the max-height workaround), so I'm trying to use jQuery's slideToggle method.

给出以下标记：

<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>

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

I implemented the following method in my controller:

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

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

Even if it seems to work as expected, I understood that modifying DOM shall be done exclusively within directives.

阅读

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

Could it be improved? Am I allowed to use jQuery within a directive? Does it respect the separation of concerns?

推荐答案

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

Alternatively, you can use AngularJS's $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 显示或隐藏描述。

Use ng-hide or ng-show to show or hide the description.

    <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>

请参阅

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

这篇关于使用AngularJS和jQuery修改DOM（slideDown / slideUp）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！