Ich versuche mit AngularJS eine slideDown / slideUp Animation zu implementieren. Ich kann den Übergang von CSS3 (leider) seit dem nicht verwendenheight ist eingestellt aufauto (und ich möchte nicht verwendendasmax-height Problemumgehung), also versuche ich jQuery's zu benutzenslideToggle Methode.

Angesichts des folgenden Aufschlags:

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

Ich habe die folgende Methode in meinen Controller implementiert:

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

GEIGE

Auch wenn es wie erwartet zu funktionieren scheint, habe ich verstanden, dass das Ändern von DOM ausschließlich innerhalb von Richtlinien erfolgen soll.

Nachdem ich gelesen habeDokumentation von AngularJS (was ich meiner Meinung nach ein bisschen leicht finde), Richtlinien sind für mich immer noch ein bisschen vage, also könnte mir jemand sagen, ob die folgende Richtlinie dies respektiertAngularJS's beste Praxis oder nicht?

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

GEIGE

Könnte es verbessert werden? Bin icherlaubt kann man jQuery innerhalb einer Direktive verwenden? Respektiert es dieTrennung von Bedenken?