fix(ng-view, ng-include): onload and $contentLoaded

- change custom onload directive to special arguments recongnized by both
  ng-view and ng-include
- rename $contentLoaded event to $viewContentLoaded and $includeContentLoaded
- add event docs
This commit is contained in:
Igor Minar 2012-03-08 15:42:35 -08:00
parent f54db2ccda
commit 5d09a1efd3
5 changed files with 34 additions and 23 deletions

View file

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

View file

@ -63,6 +63,16 @@
</doc:scenario>
</doc:example>
*/
/**
* @ngdoc event
* @name angular.module.ng.$compileProvider.directive.ng:include#$includeContentLoaded
* @eventOf angular.module.ng.$compileProvider.directive.ng:include
* @eventType emit on the current ng:include scope
* @description
* Emitted every time the ng:include content is reloaded.
*/
var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile',
function($http, $templateCache, $anchorScroll, $compile) {
return {
@ -70,6 +80,7 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
compile: function(element, attr) {
var srcExp = attr.src,
scopeExp = attr.scope || '',
onloadExp = attr.onload || '',
autoScrollExp = attr.autoscroll;
return function(scope, element, attr) {
@ -106,7 +117,8 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
$anchorScroll();
}
scope.$emit('$contentLoaded');
scope.$emit('$includeContentLoaded');
scope.$eval(onloadExp);
}
}).error(clearContent);
} else {

View file

@ -93,6 +93,16 @@
</doc:scenario>
</doc:example>
*/
/**
* @ngdoc event
* @name angular.module.ng.$compileProvider.directive.ng:view#$viewContentLoaded
* @eventOf angular.module.ng.$compileProvider.directive.ng:view
* @eventType emit on the current ng:view scope
* @description
* Emitted every time the ng:view content is reloaded.
*/
var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile',
'$controller',
function($http, $templateCache, $route, $anchorScroll, $compile,
@ -100,9 +110,10 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
return {
restrict: 'ECA',
terminal: true,
link: function(scope, element) {
link: function(scope, element, attr) {
var changeCounter = 0,
lastScope;
lastScope,
onloadExp = attr.onload || '';
scope.$on('$afterRouteChange', function(event, next, previous) {
changeCounter++;
@ -142,7 +153,8 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
}
link(lastScope);
lastScope.$emit('$contentLoaded');
lastScope.$emit('$viewContentLoaded');
lastScope.$eval(onloadExp);
// $anchorScroll might listen on event...
$anchorScroll();
@ -155,15 +167,3 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
}
};
}];
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

@ -64,14 +64,14 @@ describe('ng:include', function() {
}));
it('should fire $contentLoaded event after linking the content', inject(
it('should fire $includeContentLoaded 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);
$rootScope.$on('$includeContentLoaded', contentLoadedSpy);
element = $compile('<ng:include src="\'url\'"></ng:include>')($rootScope);
$rootScope.$digest();
@ -193,8 +193,8 @@ describe('ng:include', function() {
it('should compile only the content', inject(function($compile, $rootScope, $templateCache) {
// regression
var onload = jasmine.createSpy('$contentLoaded');
$rootScope.$on('$contentLoaded', onload);
var onload = jasmine.createSpy('$includeContentLoaded');
$rootScope.$on('$includeContentLoaded', onload);
$templateCache.put('tpl.html', [200, 'partial {{tpl}}', {}]);
element = $compile('<div><div ng:repeat="i in [1]">' +

View file

@ -271,7 +271,7 @@ describe('ng:view', function() {
inject(function($templateCache, $rootScope, $location) {
$rootScope.$on('$beforeRouteChange', logger('$beforeRouteChange'));
$rootScope.$on('$afterRouteChange', logger('$afterRouteChange'));
$rootScope.$on('$contentLoaded', logger('$contentLoaded'));
$rootScope.$on('$viewContentLoaded', logger('$viewContentLoaded'));
$templateCache.put('tpl.html', [200, '{{value}}', {}]);
$location.path('/foo');
@ -279,7 +279,7 @@ describe('ng:view', function() {
expect(element.text()).toBe('bound-value');
expect(log).toEqual(['$beforeRouteChange', '$afterRouteChange', 'init-ctrl',
'$contentLoaded']);
'$viewContentLoaded']);
});
});