現在、コードのテストに問題があります。それは正常に動作します。要約すると、コードはディレクティブを使用してテンプレートをレンダリングします。テンプレートには 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
*/
});