如何在使用茉莉花的AngularJS中測試Bootstrap Modal？

Question

我使用引導模式來顯示角度應用程序中的彈出窗口。它從前端完美地工作，但彈出的DOM元素不會被追加到主體

在輸出中，當我顯示文檔的內容時，我的html模板的內容沒有被附加到主體標籤。所以我無法找到/測試任何DOM元素。它也不會在控制檯中顯示任何錯誤。

請任何人都可以幫助我解決這個問題，方法是指定如何在使用karma/jasmine的角度應用程序中測試bootstrap模態。

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> 

我的測試文件：

(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()); 
     }); 
    }); 
})(); 

AngularJS：1.3.11 引導：3.3.2 噶：0.12.31 茉莉花核心：2.3.4 karma-jasmine：0.3.5

Answer 1

我不知道是什麼原因，但通過從模態div中刪除css類「淡入淡出」，來自模態的html內容被附加到body標籤。