【问题标题】:how to access controller in directive [jasmine]如何在指令 [jasmine] 中访问控制器
【发布时间】:2016-10-07 09:43:15
【问题描述】:

我在访问指令中的方法和变量以对其进行测试时遇到了一些困难。我究竟做错了什么?我附上了我的指令和测试文件。我没有包含我的 karma conf,因为我知道它是正确的,这不是问题。

accountsearch.spec.js

 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 = compiledElem.scope()
    scope = $rootScope.$new();
    element = $compile(template)(scope)


    scope.$digest();
  }));




  it(" sets the account and calls back.", inject(function () {
   //scope.$digest()
   expect(element.setAccount).toBeFunction()
   expect(element.hasClass("form-control")).toBeTruthy()
   console.log(scope.$$prevSibling)




   }));
  //httpBackend.flush()
});

这是实际的指令,我尝试了很多方法来访问它的控制器,但我只是不知道我做错了什么。

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'
    }
}]);

【问题讨论】:

    标签: angularjs testing jasmine karma-runner angular-templatecache


    【解决方案1】:

    您需要获取该指令的控制器,该控制器包含您尝试调用的方法。

    您的 element 变量仅包含 DOM 组件。

    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)
        scope.$digest();
        ctrl = element.controller('accountSearch');
      }));
    

    在你的测试中:

    expect(ctrl.setAccount).toBeFunction()
    

    【讨论】:

    • 谢谢你,我按照你的步骤,现在我有:TypeError: Cannot read property 'setAccount' of undefined
    • 不用获取指令的模板,只需像这样直接编译它:element = $compile('<account-search></account-search>')(scope)
    • 再次感谢您,但现在我收到了意外的模板获取请求 :(
    • 您可以使用$httpBackend.whenGet('url/to/template').respond(200, template); 或使用此预处理器:github.com/karma-runner/karma-ng-html2js-preprocessor
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-13
    • 2014-11-16
    • 2017-05-14
    • 2014-01-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多