如何使用jasmine测试AngularJS中的引导模式？

我使用引导模式在angular应用程序中显示弹出窗口。它在前端工作得很好，但是弹出窗口中的DOM元素没有附加到主体中

在输出中，当我显示文档内容时，html模板的内容不会附加到body标记。因此，我无法找到/测试任何DOM元素。它也不会在控制台中显示任何错误

请任何人都可以通过指定如何使用karma/jasmine在角度应用程序中测试引导模式来帮助我解决这个问题

angular.module("myApp").directive('popUp', ['$http', '$compile', function($http, $compile) {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            course: '=',
    },
    compile: function(element, cAtts){
        var template,
            $element,
            loader;

        var windowOpen = false;

        loader = $http.get('components/popUp.view.html').success(function(data) {
            template = data;
        });

        //return the Link function
        return function(scope, element, lAtts) {

            element.on('click', function(e) {
                e.preventDefault();
                $element = $( $compile(template)(scope) ); 
                $element.modal({backdrop: 'static'});
                windowOpen = true;
            });

            // if the template changes, we need to compile the current
            // template again.  just in case there are funky sticky things
            scope.$watch('template', function(newValue, oldValue) {
                if(newValue == undefined && oldValue == undefined) return;
                if(windowOpen) return;

                if(newValue == undefined){
                    //$(".modal").remove();
                    $element.remove();
                    $element = undefined;
                    return;
                }

                $element = $( $compile(template)(scope) );
            }); 
        };
    }
  }    

}]);

我的HTML模板：

    <div id="{{handler}}" class="modal fade">
      <div style="margin:-1px auto; width:90%;float:right;" class="modal-dialog">
        <div style="padding-left: 25px; height:100vh;" class="modal-content">
          <div class="modal-header navbar-static-top"><img src="content/assets/img/close.png" data-dismiss="modal" aria-hidden="true" ng-click="close()" title="Close" alt="Close" class="popUpClose close pull-left"/>
            <div class="popUpTitle">
              <div style="font-size:22px;">{{course.CourseName}}</div>
              <div style="font-size:15px; margin-top:-5px;">{{course.CourseId}}</div><br/>
            </div>
          </div>
          <div style="display:inline" class="modal-body">
            <p>This is test Modal</p>
          </div>
          <div style="border:none;" class="modal-footer"> </div>
        </div>
      </div>
    </div>

{{course.CourseName}}
{{course.CourseId}}

这是测试模式

我的测试文件：

(function(){
    "use strict";
    describe("Testing Pop Up Directive Functionality", function(){
        var $httpBackend, $scope, fakeData, $compile, $document;
        var compileDirective, course, element, template;

        beforeEach(module('myApp.testing'));
        beforeEach(module('myApp'));

        beforeEach(inject(function ($injector, _$templateCache_, _$httpBackend_, _fakeData_, _$document_) {
            $httpBackend = _$httpBackend_;
            fakeData = _fakeData_;
            $document = _$document_;

            angular.module('components/popUp.view.html')._runBlocks[0](_$templateCache_);
            template = _$templateCache_.get('components/courses/course.attendance.popUp.view.html');

            course = fakeData.fakeCourses.Courses[0];

            compileDirective = function() {
                inject(function(_$compile_, _$rootScope_) {                 
                    $compile = _$compile_;
                    $scope = _$rootScope_.$new();
                    $scope.course=course;
                    element = angular.element('<div manageattendance="" course="course"></div>');
                    element = $compile(element)($scope);
                });

                //$scope.$digest();
            };
        }));

        it("Should display attendance of course if user is authorized", function(){
            $httpBackend.expectGET('components/courses/course.attendance.popUp.view.html').respond(template);
            compileDirective();         
            $httpBackend.flush();
            element.trigger('click');
            console.log($document.find('html').html());
        });
    });
})();

（函数（）{
“严格使用”；
描述（“测试弹出指令功能”，函数（）{
var$httpBackend、$scope、fakeData、$compile、$document；
var编译指令、过程、元素、模板；
在每个模块之前（模块（'myApp.testing'）；
在每个模块之前（模块（‘myApp’）；
每次之前（注入（函数（$injector、$templateCache、$httpBackend、u fakeData、$document）{
$httpBackend=\$httpBackend\；
伪造数据=_伪造数据;；
$document=$document；
angular.module（'components/popUp.view.html'）。_运行块[0]（$templateCache）；
template=$templateCache_u2;.get（'components/courses/courses.attention.popUp.view.html'）；
course=fakeData.fakeCourses.Courses[0]；
compileDirective=函数（）{
注入（函数（$compile，$rootScope）{
$compile=\$compile；
$scope=\$rootScope\$new（）；
$scope.course=课程；
元素=角度。元素（“”）；
元素=$compile（元素）（$scope）；
});
//$scope.$digest（）；
};
}));
它（“如果用户被授权，当然应该显示出勤情况”，函数（）{
$httpBackend.expectGET（'components/courses/course.Attention.popUp.view.html'）。响应（模板）；
compileDirective（）；
$httpBackend.flush（）；
元素。触发器（'click'）；
log（$document.find（'html'）.html（））；
});
});
})();

AngularJS:1.3.11 引导：3.3.2 业力：0.12.31 茉莉花芯：2.3.4

---

因果报应：0.3.5

< p>我不知道是什么原因，但是通过从模态div中移除CSS类“淡出”，从模态中的HTML内容被追加到体标签上。

你是否考虑使用，而不是为每个引导组件创建指令计数器部分？