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

IgorMinar · IgorMinar · commit 5d09a1efd3ff · 2012-03-08T22:29:35.000-08:00
- 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
diff --git a/src/AngularPublic.js b/src/AngularPublic.js
@@ -69,7 +69,6 @@ function publishExternalAPI(angular){
             script: scriptDirective,
             select: selectDirective,
             style: styleDirective,
-            onload: onloadDirective,
             option: optionDirective,
             ngBind: ngBindDirective,
             ngBindHtml: ngBindHtmlDirective,
diff --git a/src/directive/ngInclude.js b/src/directive/ngInclude.js
@@ -63,13 +63,24 @@
       </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 {
     restrict: 'EA',
     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 {
diff --git a/src/directive/ngView.js b/src/directive/ngView.js
@@ -93,16 +93,27 @@
       </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,
                         $controller) {
   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);
-    });
-  }
-});
diff --git a/test/directive/ngIncludeSpec.js b/test/directive/ngIncludeSpec.js
@@ -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]">' +
diff --git a/test/directive/ngViewSpec.js b/test/directive/ngViewSpec.js
@@ -271,15 +271,15 @@ 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');
       $rootScope.$digest();
 
       expect(element.text()).toBe('bound-value');
       expect(log).toEqual(['$beforeRouteChange', '$afterRouteChange', 'init-ctrl',
-                           '$contentLoaded']);
+                           '$viewContentLoaded']);
     });
   });
 
