javascript - 使用 AngularJS 和 jQuery 修改 DOM (slideDown/slideUp)

Question

我正在尝试使用 AngularJS 实现 SlideDown/slideUp 动画。我无法使用 CSS3 的转换(不幸的是)，因为 height 设置为 auto (而且我不想使用 the max-height workaround )，所以我正在尝试使用 jQuery 的 slideToggle 方法。

给定以下标记:

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

我在 Controller 中实现了以下方法:

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

FIDDLE

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

读完 AngularJS' documentation 后(我觉得有点轻，恕我直言)，指令对我来说仍然有点模糊，所以有人能告诉我以下指令是否尊重AngularJS的最佳实践吗？

.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

可以改进吗？我允许在指令中使用 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显示或隐藏描述。

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

参见JSFiddle

附注您必须包含 jquery 和 angular-animate.js