無法在AngularJS中使用$ compile

我正在使用自定義指令的AngularJS應用程序。我也嘗試在我的應用程序中使用單元測試。所以，我試圖利用茉莉花。目前，我的單元測試是問題所在。目前，它看起來像下面這樣：

myDirective.spec.js

describe('Directive: myDirective', function() { 
    describe('Function: myProcedure', function() { 
    it('should word', function ($rootScope, $compile) {  
     var e = angular.element('<div><br /></div>'); 
    console.log($compile); 
     $compile(e)($rootScope); 

     expect(true).toBe(true); 
    }); 
    }); 
});

該測試拋出異常。當console.log行運行時，它會打印：'undefined'。下一行向Jasmine拋出一個錯誤：'TypeError：undefined不是函數'。

它就像我沒有注入$ compile服務。但是，我相信我正在這樣做。我的測試跑步者看起來如下：

<html ng-app="testApp"> 
<head> 
    <title></title> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script> 

    <script type="text/javascript" src="index.html.js"></script> 
    <script type="text/javascript" src="directives/myDirective.js"></script> 
    <script type="text/javascript" src="tests/unit/myDirective.spec.js"></script> 

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css" /> 
</head> 

<body> 

    <a href="#" onclick="env.execute()">run tests</a> 

</body> 
</html>

爲什麼我不能運行這個基本的測試？我究竟做錯了什麼？

來源

2014-02-20 user3284007

首先，你必須添加的角度嘲笑：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-mocks.js"> 
</script>

然後加載模塊和注入$編譯/ $ rootScope在beforeEach塊：

describe('Directive: myDirective', function() { 
    var $compile; 
    var $rootScope; 

    beforeEach(module('testApp')); 

    beforeEach(inject(function(_$compile_, _$rootScope_){ 
    $compile = _$compile_; 
    $rootScope = _$rootScope_; 
    })); 

    describe('Function: myProcedure', function() { 
    it('should word', function() {  
     var e = angular.element('<div><br /></div>'); 

     $compile(e)($rootScope);  
     expect(true).toBe(true); 

    }); 
    }); 
});

檢查單元測試文檔：http://docs.angularjs.org/guide/dev_guide.unit-testing#directives

來源

2014-02-20 18:50:30

不幸的是，我無法得到這個方法的工作。當我嘗試運行我的測試時，出現如下錯誤：ReferenceError：模塊未定義。我錯過了什麼？ – user3284007

哇。我曾嘗試過一段時間。然後我睡覺醒了。寫了一個不同的谷歌查詢，這是我來到：http://stackoverflow.com/questions/20109235/angularjs-testing-with-jasmine-unable-to-call-angular-mock-module-while-using – user3284007

更新單位測試文檔鏈接：https：//docs.angularjs.org/guide/unit-testing#testing-directives –

茉莉花提供的it（）函數不會爲你做任何注射，所以你需要將你的角度組件注入到你的測試中。修改您的測試，如下所示：

describe('Directive: myDirective', function() { 
    describe('Function: myProcedure', function() { 
    it('should word', function() {  
     inject(function ($rootScope, $compile) { 
     var e = angular.element('<div><br /></div>'); 
     //rest of code goes here 
     });

您還需要參考angular.mocks library。

來源

2014-02-20 18:47:05 bmceldowney

剛纔我遇到了這個問題，這就是我的一天（實際上最後），只需添加「module（'ng'）;」以及模塊（'yourAppModule'）。它應該工作。

來源

2015-10-21 14:08:03 user4516681

無法在AngularJS中使用$ compile

回答

相關問題