title: $.fn equivalent in angularjs (using angular.element)?
body: <p>I'm doing a directive unit test using jasmine.</p>
  
  <p>I have this test working now, but I must replace the <code>$.fn</code> using the equivalent for angularjs, (because in my company they don't let us use <code>$</code>)</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>(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);
  </code></pre>
  
  <p><strong>Test:</strong></p>
  
  <pre><code>(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('&lt;div style="overflow:scroll; width:100px; height:100px;" scroll-top-event="main-scroll-top"&gt;&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;br&gt;x&lt;/div&gt;');
          $compile(div)($scope);
          spyOn($.fn, 'animate');
          $scope.$emit('main-scroll-top');
          $scope.$digest();
          expect(div.animate).toHaveBeenCalledWith({scrollTop: 0}, 500);
        });    
    });
  })();
  </code></pre>