$ .fn Äquivalent in angularjs (mit angular.element)?

Question

Ich mache eine Direktive Einheit Test mit Jasmin.

Ich habe diesen Test jetzt arbeiten, aber ich muss die $.fn mit dem Äquivalent für AngularJS ersetzen,

-Code (weil in meiner Firma sie uns nicht $ lassen verwenden):

(function scrollTopEventDirective(application) { 
    'use strict'; 

    application.services.directive('scrollTopEvent', ['$rootScope', function scrollTopEvent($rootScope) { 
    return { 
     restrict: 'A', 
     link: function link(scope, element, attrs) { 
     $rootScope.$on(attrs.scrollTopEvent, function onScope(event, top) { 
      element.animate({ scrollTop: top || 0 }, 500); 
     }); 
     } 
    }; 
    }]); 
})(window.application); 

Test:

(function scrollTopEventTest() { 
    'use strict'; 

    describe('Directive: scrollTopEvent', function scrollTopEvent() { 

    beforeEach(module('app')); 

    var $compile, $scope; 

    beforeEach(inject(function beforeFunction(_$compile_, $rootScope) { 
     $compile = _$compile_; 
     $scope = $rootScope.$new(); 
    })); 

    describe('Scroll set top property', function scrollTopEventTest() { 
     it('should call the scroll top event without value', function scrollTopEventTest() { 
     var div = angular.element('<div style="overflow:scroll; width:100px; height:100px;" scroll-top-event="main-scroll-top"><br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x</div>'); 
     $compile(div)($scope); 
     spyOn($.fn, 'animate'); 
     $scope.$emit('main-scroll-top'); 
     $scope.$digest(); 
     expect(div.animate).toHaveBeenCalledWith({scrollTop: 0}, 500); 
     });  
    }); 
})(); 

Answer 1

Verwendung angular.element.prototype

jQuery.fn ist ein Alias ​​für jQuery.prototype. In AngularJS ist angular.element ein Alias ​​für jQuery. Verwenden Sie also angular.element.prototype.

Aus dem Text & Tabellen:

Wenn jQuery verfügbar ist, angular.element ist ein Alias ​​für die jQuery Funktion. Wenn jQuery nicht verfügbar ist, delegiert angular.element an die in AngularJS integrierte Teilmenge von jQuery mit dem Namen "jQuery lite" oder jqLite.

Um jQuery zu verwenden, stellen Sie einfach sicher, dass es vor der Datei angular.js geladen ist. Sie können auch die Anweisung ngJq verwenden, um anzugeben, dass jqlite über jQuery verwendet werden soll, oder um eine bestimmte Version von jQuery zu verwenden, wenn mehrere Versionen auf der Seite vorhanden sind.

— AngularJS angular.element API Reference