Added data-only-contents support

readme.md

@@ -182,6 +182,33 @@ Becomes:
 </div>
 ```
 
+### Only Block Contents: `data-only-contents`
+
+```html
+<div data-extend-template="/layout.html">
+   <div data-block-append="content" data-only-contents>
+       <p>Foo</p>
+   </div>
+</div>
+```
+
+Becomes:
+
+```html
+<div data-extend-template="/layout.html">
+    <header data-block="header">
+        <p>:header</p>
+    </header>
+    <div data-block="content">
+       <p>:content</p>
+       <p>Foo</p>
+    </div>
+    <footer data-block="footer">
+        <p>:footer</p>
+    </footer>
+</div>
+```
+
 ## API
 
 See the [spec](https://github.com/wmluke/angular-blocks/blob/master/test/angular-blocks-spec.js).

src/angular-blocks.js

@@ -24,9 +24,11 @@
                         var $template = $(document.createElement('div')).html(template);
 
                         function override(method, $block, attr) {
-                            var name = $block.attr(attr);
-                            if ($template.find('[data-block="' + name + '"]')[method]($block).length === 0 &&
-                                $template.find('[data-extend-template]').append($block).length === 0) {
+                            var name = $block.attr(attr),
+                                elements = $block.attr('data-only-contents') !== undefined ? $block.contents() : $block;
+
+                            if ($template.find('[data-block="' + name + '"]')[method](elements).length === 0 &&
+                                $template.find('[data-extend-template]').append(elements).length === 0) {
                                 warnMissingBlock(name, src);
                             }
                         }

test/angular-blocks-spec.js

@@ -356,4 +356,59 @@ describe('angular-blocks directives', function () {
         }));
     });
 
+    describe('data-only-contents directive attribute', function () {
+        it('should append the contents of the block', inject(function ($compile) {
+            var html = [
+                '<div data-extend-template="/main-layout.html">',
+                '   <div data-block-append="content" data-only-contents><p>{{ foo }}</p></div>',
+                '</div>'
+            ];
+
+            var element = angular.element(html.join('\n'));
+            element = $compile(element)($scope);
+            $scope.$digest();
+            $httpBackend.flush();
+
+            expect(element.find('[data-block="header"]').html().trim()).toBe('<p class="ng-binding">:header</p>');
+            expect(element.find('[data-block="content"]').html().trim()).toBe('<p>:content</p><p class="ng-binding">Bar</p>');
+            expect(element.find('[data-block="footer"]').html().trim()).toBe('<p>:footer</p>');
+        }));
+
+        it('should support multiple inheritance', inject(function ($compile) {
+            var html = [
+                '<div data-extend-template="/sub-layout.html">',
+                '   <div data-block-append="content" data-only-contents><p>{{ foo }}</p></div>',
+                '</div>'
+            ];
+
+            var element = angular.element(html.join('\n'));
+            element = $compile(element)($scope);
+            $scope.$digest();
+            $httpBackend.flush();
+
+            expect(element.find('[data-block="header"]').html().trim()).toBe('<p class="ng-binding">:sub-header</p>');
+            expect(element.find('[data-block="content"]').html().trim()).toBe('<p>:content</p><p class="ng-binding">Bar</p>');
+            expect(element.find('[data-block="footer"]').html().trim()).toBe('<p>:footer</p>');
+        }));
+
+        it('should log a warning if the block is missing', inject(function ($compile, $log) {
+            var html = [
+                '<div data-extend-template="/main-layout.html">',
+                '   <div data-block-append="foo" data-only-contents><p>{{ foo }}</p></div>',
+                '</div>'
+            ];
+
+            var element = angular.element(html.join('\n'));
+            element = $compile(element)($scope);
+            $scope.$digest();
+            $httpBackend.flush();
+
+            expect($log.warn.logs[0][0]).toEqual('Failed to find data-block=foo in /main-layout.html');
+            expect(element.find('[data-block="header"]').html().trim()).toBe('<p class="ng-binding">:header</p>');
+            expect(element.find('[data-block="content"]').html().trim()).toBe('<p>:content</p>');
+            expect(element.find('[data-block="footer"]').html().trim()).toBe('<p>:footer</p>');
+        }));
+
+    });
+
 });