fix(ngInclude): ensure ngInclude is terminal and uses its own manual …

…transclusion system
angular · Aug 9, 2013 · 1b5bee4 · 1b5bee4
1 parent 45dc9ee
commit 1b5bee4
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 16 deletions.
diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js
@@ -149,18 +149,23 @@
  * @description
  * Emitted every time the ngInclude content is reloaded.
  */
+var NG_INCLUDE_PRIORITY = 500;
 var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile', '$animate', '$sce',
                   function($http,   $templateCache,   $anchorScroll,   $compile,   $animate,   $sce) {
   return {
     restrict: 'ECA',
     terminal: true,
-    transclude: 'element',
-    compile: function(element, attr, transclusion) {
+    priority: NG_INCLUDE_PRIORITY,
+    compile: function(element, attr) {
       var srcExp = attr.ngInclude || attr.src,
           onloadExp = attr.onload || '',
           autoScrollExp = attr.autoscroll;
 
-      return function(scope, $element) {
+      element.html('');
+      var anchor = jqLite(document.createComment(' ngInclude: ' + srcExp + ' '));
+      element.replaceWith(anchor);
+
+      return function(scope) {
         var changeCounter = 0,
             currentScope,
             currentElement;
@@ -184,23 +189,21 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile'
               if (thisChangeId !== changeCounter) return;
               var newScope = scope.$new();
 
-              transclusion(newScope, function(clone) {
-                cleanupLastIncludeContent();
+              cleanupLastIncludeContent();
 
-                currentScope = newScope;
-                currentElement = clone;
+              currentScope = newScope;
+              currentElement = element.clone();
+              currentElement.html(response);
+              $animate.enter(currentElement, null, anchor);
 
-                currentElement.html(response);
-                $animate.enter(currentElement, null, $element);
-                $compile(currentElement.contents())(currentScope);
+              $compile(currentElement, false, NG_INCLUDE_PRIORITY - 1)(currentScope);
 
-                if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
-                  $anchorScroll();
-                }
+              if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) {
+                $anchorScroll();
+              }
 
-                currentScope.$emit('$includeContentLoaded');
-                scope.$eval(onloadExp);
-              });
+              currentScope.$emit('$includeContentLoaded');
+              scope.$eval(onloadExp);
             }).error(function() {
               if (thisChangeId === changeCounter) cleanupLastIncludeContent();
             });

diff --git a/test/ng/directive/ngIncludeSpec.js b/test/ng/directive/ngIncludeSpec.js
@@ -280,6 +280,31 @@ describe('ngInclude', function() {
     dealoc(element);
   }));
 
+  it('should compile only the inner content once', function() {
+    var log = [];
+
+    module(function($compileProvider) {
+      $compileProvider.directive('compileLog', function() {
+        return {
+          compile: function() {
+            log.push('compile');
+          }
+        };
+      });
+    });
+
+    inject(function($compile, $rootScope, $templateCache) {
+      $templateCache.put('tpl.html', [200, '<div compile-log>123</div>', {}]);
+      element = $compile('<div><div ng-include="exp"></div></div>')($rootScope);
+
+      $rootScope.exp = 'tpl.html';
+      $rootScope.$digest();
+
+      expect(element.text()).toBe('123');
+      expect(log).toEqual(['compile']);
+    });
+  });
+
 
   describe('autoscoll', function() {
     var autoScrollSpy;