访问AngularJs指令控制器

Question

我在使用jasmine和karma testrunner进行单元测试的指令访问我的控制器时遇到了一些问题.该指令如下所示:

指示

angular.module('Common.accountSearch',['ngRoute'])

    .directive('accountSearch', [function() {
        return {
            controllerAs: 'ctrl',
            controller: function ($scope, $element, $routeParams, $http) {

                this.setAccount = function () {
                    var response = { AccountId : $scope.ctrl.searchedAccount.AccountId }
                    $scope.callback(response)
                }


                this.getAccounts = function(searchText){
                    return $http.get('/api/CRMAccounts', {
                        params: {
                            retrievalLimit: 10,
                            search: searchText
                        }
                    }).then(function(response){
                        return response.data;
                    });

                }

            },
            scope : {
                config : '=',
                values : '=',
                callback : '='
            },
            templateUrl : '/common/components/account-search/account-search.html',
            restrict : 'EAC'
        }
    }]);

这是测试用例文件到目前为止我认为所有都是正确的(我希望):

测试用例文件:

    describe("Account search directive logic tests", function (){
  var element,$scope,scope,controller,template

  beforeEach(module("Common.accountSearch"))


  beforeEach(inject( function (_$compile_, _$rootScope_,_$controller_,$templateCache) {
    template = $templateCache.get("components/account-search/account-search.html")
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $controller = _$controller_;
    scope = $rootScope.$new();
    element = $compile(template)(scope)
    ctrl = element.controller
    scope.$digest();
  //  httpBackend = _$httpBackend_;
  }));




  it(" sets the account and calls back.", inject(function () {

    console.log(ctrl)
    expect(ctrl).toBeDefined()
   }));
  //httpBackend.flush()
});

我已成功地打印指令(我想)到返回以下暧昧短信控制台的控制器:

LOG: function (arg1, arg2) { ... }

我无法访问指令中的任何函数或属性,因为它们都返回"未定义",我做错了什么？

Answer 1

指令的控制器实际上是完全可注入的 - 无需提供构造函数，您只需按名称引用控制器即可。在此处查看 Angular 的指令定义对象文档：https : //docs.angularjs.org/api/ng/service/ $compile#directive-definition-object

在您想要对控制器进行单元测试的情况下，您只需这样做：

common.accountSearch.js

angular.module('Common.accountSearch', [])
  .directive('accountSearch', [function () {
      return {
          controller: 'accountSearchCtrl',
          scope: {
              config    : '=',
              values    : '=',
              callback  : '='
          },
          templateUrl : '/common/components/account-search/account-search.html',
          restrict: 'EAC'
      }
  }])
  .controller('accountSearchCtrl', ['$scope', function ($scope) {
      $scope.setAccount = function () {
          var response = {
              AccountId: $scope.ctrl.searchedAccount.AccountId
          };
          $scope.callback(response);
      }

      $scope.getAccounts = function (searchText) {
          // Code goes here...
      }
  }]);

common.accountSearch-spec.js

describe("Account search directive logic tests", function () {    
    var controller, scope;

    beforeEach(module("Common.accountSearch"));

    beforeEach(inject(function (_$controller_, _$rootScope_) {        
        $rootScope = _$rootScope_;
        scope = $rootScope.$new();
        controller = _$controller_('accountSearchCtrl', { '$scope': scope });        
    }));

    it(" sets the account and calls back.", function () {
        expect(controller).toBeDefined();
    });
});

通过这种方式，您可以像任何其他控制器一样将控制器直接注入 jasmine 测试中。

希望这可以帮助。

Answer 2

很近!

element.controller是一个函数,需要传递您尝试获取控制器的指令的名称.在这种情况下,它会

ctrl = element.controller("accountSearch");