feat(ng:include) Fire $contentLoaded event

+ refactor unload to listen on this event -> we can use unload with ng:view as well

Closes #743
This commit is contained in:
Vojta Jina 2012-02-19 12:59:10 -08:00
parent 9486590e1b
commit 60743fc52a
5 changed files with 49 additions and 5 deletions

View file

@ -72,6 +72,7 @@ function publishExternalAPI(angular){
script: scriptTemplateLoader,
select: selectDirective,
style: styleDirective,
onload: onloadDirective,
option: optionDirective,
ngBind: ngBindDirective,
ngBindHtml: ngBindHtmlDirective,

View file

@ -975,3 +975,15 @@ var styleDirective = valueFn({
restrict: 'E',
terminal: true
});
var onloadDirective = valueFn({
restrict: 'AC',
link: function(scope, elm, attr) {
var onloadExp = attr.onload || ''; //workaround for jquery bug #7537)
scope.$on('$contentLoaded', function(event) {
scope.$eval(onloadExp);
});
}
});

View file

@ -177,7 +177,7 @@ function $RouteProvider(){
* @ngdoc event
* @name angular.module.ng.$route#$routeUpdate
* @eventOf angular.module.ng.$route
* @eventType emit on the current route scope
* @eventType broadcast on root scope
* @description
*
* The `reloadOnSearch` property has been set to false, and we are reusing the same

View file

@ -68,7 +68,6 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
compile: function(element, attr) {
var srcExp = attr.src,
scopeExp = attr.scope || '',
onloadExp = attr.onload || '', //workaround for jquery bug #7537
autoScrollExp = attr.autoscroll;
if (!element[0]['ng:compiled']) {
element[0]['ng:compiled'] = true;
@ -106,7 +105,7 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
$anchorScroll();
}
scope.$eval(onloadExp);
scope.$emit('$contentLoaded');
}
}).error(clearContent);
} else {

View file

@ -119,6 +119,22 @@ describe('widget', function() {
}));
it('should fire $contentLoaded event after linking the content', inject(
function($rootScope, $compile, $templateCache) {
var contentLoadedSpy = jasmine.createSpy('content loaded').andCallFake(function() {
expect(element.text()).toBe('partial content');
});
$templateCache.put('url', [200, 'partial content', {}]);
$rootScope.$on('$contentLoaded', contentLoadedSpy);
element = $compile('<ng:include src="\'url\'"></ng:include>')($rootScope);
$rootScope.$digest();
expect(contentLoadedSpy).toHaveBeenCalledOnce();
}));
it('should evaluate onload expression when a partial is loaded', inject(
putIntoCache('myUrl', 'my partial'),
function($rootScope, $compile, $browser) {
@ -620,7 +636,7 @@ describe('widget', function() {
describe('ng:view', function() {
beforeEach(module(function() {
return function($rootScope, $compile) {
element = $compile('<ng:view></ng:view>')($rootScope);
element = $compile('<ng:view onload="load()"></ng:view>')($rootScope);
};
}));
@ -847,7 +863,7 @@ describe('widget', function() {
$routeProvider.when('/foo', {controller: noop, template: 'myUrl1'});
});
inject(function($route, $rootScope, $location, $templateCache, $browser) {
inject(function($route, $rootScope, $location, $templateCache) {
$templateCache.put('myUrl1', [200, 'my partial', {}]);
$location.path('/foo');
@ -1004,6 +1020,22 @@ describe('widget', function() {
expect(log).toEqual(['init-foo', 'route-update', 'destroy-foo', 'init-bar']);
});
});
it('should evaluate onload expression after linking the content', function() {
module(function($routeProvider) {
$routeProvider.when('/foo', {template: 'tpl.html'});
});
inject(function($templateCache, $location, $rootScope) {
$templateCache.put('tpl.html', [200, '{{1+1}}', {}]);
$rootScope.load = jasmine.createSpy('onload');
$location.url('/foo');
$rootScope.$digest();
expect($rootScope.load).toHaveBeenCalledOnce();
});
})
});