1

我目前在测试我的代码时遇到问题。它工作正常。总之，代码使用指令来呈现模板。模板里面有一个 ngRepeat 指令。无论出于何种原因，模板都被渲染为

<!-- ngRepeat: current in upcoming.data | filter:query | orderBy
:orderProp -->

而不是继续渲染事物并创建列表。这是为什么？我在$rootScope.$digest()做完之后打电话$compile(element)($rootScope)给我，它仍然给我评论的ngRepeat指令。

这是指令代码

app.directive('upcominghub',function(){
return {
    restrict: 'E',
    scope: { id: '@publisherid'},
    templateUrl:"partials/upcoming-list.html",
    controller:UpcomingWebinarCtrl,
    replace:true,
    link: function(scope,elem,attr){
        scope.fireQuery(attr.publisherid);
    }
}
});

var UpcomingWebinarCtrl=function($scope,$routeParams,$modal,UpcomingWebinar){
$scope.upcoming=null;
$scope.fireQuery = function(publisherId){
    $scope.upcoming=UpcomingWebinar.query({id:publisherId});
}
$scope.orderProp = 'publishedDate';
$scope.modalClick = function(myContent){
    $scope.modalInstance = $modal.open({
          templateUrl: 'partials/modal-template.html',
          controller: ContentModalInstanceCtrl,
          resolve: {
            content: function () {
              return myContent
            }
          }
    });
};
};

测试代码

describe(
    'directives',
    function() {
        var $httpBackend, $compile, $rootScope,$document, modalTemplate,mockWebinar;

        beforeEach(module('hublishedEmbed'));
        beforeEach(module('partials/content-embed.html'));
        beforeEach(module('partials/recorded-list.html'));
        beforeEach(module('partials/upcoming-list.html'));
        beforeEach(module('partials/modal-template.html'));
        beforeEach(module('mockWebinar','mockHub','mockUpcomingHub'));

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

        /**
         * Compile an HTML element.
         * Required to process directives
         */
        function compileElement(element){
            $compile(element)($rootScope);
            $rootScope.$digest();
        }

        /**
         * Get mock data for Upcoming
         * Populates the HttpBackend mock object
         * uses test/mock/mockUpcomingHub.js
         */
        function getMockUpcomingData() {
            // Need to inject the mock webinar data from the module
            inject(function(mockUpcomingHub) {
                $httpBackend
                        .expectPOST(
                                '/HublishedEmbed/services/webinar/getUpcomingForPublisher?publisherId=1&token=testToken')
                        .respond(mockUpcomingHub);

            })

        }

        //Test upcominghub is formatted properly
        it("upcominghub directive should use the upcoming-list template", function() {
            getMockUpcomingData();
            var element= angular.element('<div><upcominghub publisherid="1"><b>Nada</b></upcominghub></div>');
            compileElement(element);
            console.log(element.html());
            expect($('div.hubCalEvent').length).toBe(6);
        });

        /**
         * TODO figure out how to show that the ngRepeats are formatting correctly.
         * Currently cannot figure out why $digest is rendering the ng-repeats as
         * a comment
         */

    });
4

0 回答 0