如何使用 Karma 在 AngularJS 控制器中测试 $element？

Question

我遇到的问题是我的应用中有一个控制器，我使用的类似 <div ng-controller='LogbookEditCtrl'> </div> 并且这个控制器中有一个 $element 提供程序，我需要修改该元素。

describe('LogbookEditCtrl', function(){
  'use strict';

  beforeEach(module('logbooks.edit'));


  it('should create "logbook" model', inject(function($controller) {
    var scope = {},

    // THIS EXPLODES BECAUSE IT SAYS THE $element PROVIDER WAS NOT FOUND, because there
    // is no html element of course..the controller is being created on its own.
    ctrl = $controller('LogbookEditCtrl', {$scope: scope});

  }));

});

我尝试了类似以下的方法，但它再次说找不到 $element 提供程序：

beforeEach(inject(function(_$element_) {
  var element = compile('<div></div>');
  $element = element;
}));

Answer 1

您需要传递该依赖项本身，因为它引用控制器的绑定元素。并且在 Angular 中没有可用的 $element 提供程序（与 $scope 非常相似，因为这些是应用程序注入器提供的动态特殊依赖项）。您可以使用 angular.element 创建一个元素对象，并将其作为局部变量传递给控制器​​构造函数，就像这样。

var scope = {}, 
    element = angular.element('<div></div>'); //provide element you want to test

ctrl = $controller('LogbookEditCtrl', {$scope: scope, $element:element });

这揭示了为什么不建议在控制器内部使用$element 并在其中执行任何 DOM 操作的事实。