angularjs中的$ .fn等价物（使用angular.element）？

Question

我正在使用茉莉花进行指令单元测试。

我现在正在使用此测试，但我必须使用angularjs的等效项替换$.fn（因为在我的公司中他们不允许我们使用$）

代码：

(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);

测试

(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

使用angular.element.prototype

jQuery.fn是jQuery.prototype的别名。在AngularJS中，angular.element是jQuery的别名。因此，请使用angular.element.prototype。

来自文档：

  

如果jQuery可用，则angular.element是jQuery功能的别名。如果jQuery不可用，angular.element委托给AngularJS的内置jQuery子集，称为＆＃34; jQuery lite＆＃34;或 jqLit​​e 。

     

要使用jQuery，只需确保在angular.js文件之前加载它。您还可以使用ngJq指令指定jQueryite应该用于jQuery，或者如果页面上存在多个版本，则使用特定版本的jQuery。

     

— AngularJS angular.element API Reference