fix(ngTransclude): fix case where ngTransclude attribute value equals its key

petebacondarwin · petebacondarwin · commit 7ddbc9aa3511 · 2015-11-26T11:11:23.000Z
Some preprocessors such as Jade will automatically provide a value for an attribute rather than leave it empty. E.g. `<div ng-transclude="ng-transclude">`. In these situations we still want to use the default transclusion slot. Closes angular#12934 Closes angular#13383
diff --git a/src/ng/directive/ngTransclude.js b/src/ng/directive/ngTransclude.js
@@ -15,8 +15,8 @@
  *
  * @element ANY
  *
- * @param {string} ngTransclude|ngTranscludeSlot the name of the slot to insert at this point. If this is not provided or empty then
- *                                               the default slot is used.
+ * @param {string} ngTransclude|ngTranscludeSlot the name of the slot to insert at this point. If this is not provided, is empty
+ *                                               or its value is the same as the name of the attribute then the default slot is used.
  *
  * @example
  * ### Default transclusion
@@ -113,6 +113,12 @@ var ngTranscludeDirective = ngDirective({
   restrict: 'EAC',
   link: function($scope, $element, $attrs, controller, $transclude) {
 
+    if ($attrs.ngTransclude === $attrs.$attr.ngTransclude) {
+      // If the attribute is of the form: `ng-transclude="ng-transclude"`
+      // then treat it like the default
+      $attrs.ngTransclude = '';
+    }
+
     function ngTranscludeCloneAttachFn(clone) {
       $element.empty();
       $element.append(clone);
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
@@ -7680,6 +7680,40 @@ describe('$compile', function() {
       });
     });
 
+    it('should use the default transclusion slot if the ng-transclude attribute has the same value as its key', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {},
+            template:
+              '<div class="a" ng-transclude="ng-transclude"></div>' +
+              '<div class="b" ng:transclude="ng:transclude"></div>' +
+              '<div class="c" data-ng-transclude="data-ng-transclude"></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<minion-component>' +
+            '<span>stuart</span>' +
+            '<span>bob</span>' +
+            '<span>kevin</span>' +
+          '</minion-component>')($rootScope);
+        $rootScope.$apply();
+        var a = element.children().eq(0);
+        var b = element.children().eq(1);
+        var c = element.children().eq(2);
+        expect(a).toHaveClass('a');
+        expect(b).toHaveClass('b');
+        expect(c).toHaveClass('c');
+        expect(a.text()).toEqual('stuartbobkevin');
+        expect(b.text()).toEqual('stuartbobkevin');
+        expect(c.text()).toEqual('stuartbobkevin');
+      });
+    });
+
     it('should transclude elements to an `ng-transclude` with a matching transclusion slot name', function() {
       module(function() {
         directive('minionComponent', function() {
