Angularjs 在Angular.js指令上运行TestCular单元测试时出现包含的JavaScript问题

我正在尝试为一个指令编写一个单元测试，该指令用于插入一个传单.js映射

这个标签

<div ng-controller="WorldMapCtrl">
    <sap id="map"></sap>
</div>

以及以下指令

angular.module('MyApp').
    directive('sap', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [40, -86],
                zoom: 2
            });
            //create a CloudMade tile layer and add it to the map
         L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 4, minZoom: 2
            }).addTo(map);
        }
    };
});

angular.module（'MyApp'）。
指令（'sap'，函数（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
var map=L.map（属性id{
中间：[40，-86]，
缩放：2
});
//创建CloudMake平铺层并将其添加到地图中
L.tileLayer（'http://{s}.tile.cloudmake.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png'{
最大缩放：4，最小缩放：2
}).addTo（地图）；
}
};
});

这将正确地将地图插入页面。当我运行下面的单元测试时，它与

TypeError:无法读取null的属性“\u传单”

description（'指令'，函数（））{
在每个模块之前（模块（‘MyApp’）；
//测试单张地图指令
描述（'测试传单地图指令'，函数（））{
它（'应该创建传单目录以便正确地注入页面'，函数（）{
注入（函数（$compile，$rootScope）{
var元素=$compile（“”）（$rootScope）；
expect（element.className）.toBe（‘传单容器传单褪色动画’）；
})
});
});
});

从谷歌搜索中我可以看出，这个错误似乎相当普遍。可能没有正确地放入标记（使用id=“map”）或类似的东西会导致问题。然而，我没有看到我可以通过测试这个指令来改变什么。知道我做错了什么吗

我还在testacular.conf.JS中包含了必要的JS文件，其顺序与index.html中包含的顺序相同。所以，这不是文件不存在的问题（至少我认为是这样）

---

谷歌搜索的一个结果（遗憾的是，它没有帮助）：

只是一个猜测，但在您的测试中，在调用

$compile

之后和

expect

行之前，尝试添加

$rootScope.$digest（）

以防视图未更新时出现问题。遗憾的是，这没有帮助。谢谢你的努力。

angular.module('MyApp').
    directive('sap', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [40, -86],
                zoom: 2
            });
            //create a CloudMade tile layer and add it to the map
         L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 4, minZoom: 2
            }).addTo(map);
        }
    };
});

describe('directives', function() {
    beforeEach(module('MyApp'));

    // Testing Leaflet map directive
    describe('Testing Leaflet map directive', function() {
        it('should create the leaflet dir for proper injection into the page', function() {
            inject(function($compile, $rootScope) {
                var element = $compile('<sap id="map"></sap>')($rootScope);
                expect(element.className).toBe('leaflet-container leaflet-fade-anim');
            })
        });
    });
});