diff --git a/readme.md b/readme.md index 533e1ea..7bfafb0 100644 --- a/readme.md +++ b/readme.md @@ -182,6 +182,33 @@ Becomes: ``` +### Only Block Contents: `data-only-contents` + +```html +
+
+

Foo

+
+
+``` + +Becomes: + +```html +
+
+

:header

+
+
+

:content

+

Foo

+
+ +
+``` + ## API See the [spec](https://github.com/wmluke/angular-blocks/blob/master/test/angular-blocks-spec.js). diff --git a/src/angular-blocks.js b/src/angular-blocks.js index e3238b5..d43538d 100644 --- a/src/angular-blocks.js +++ b/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); } } diff --git a/test/angular-blocks-spec.js b/test/angular-blocks-spec.js index d461c49..cf65df0 100644 --- a/test/angular-blocks-spec.js +++ b/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 = [ + '
', + '

{{ foo }}

', + '
' + ]; + + var element = angular.element(html.join('\n')); + element = $compile(element)($scope); + $scope.$digest(); + $httpBackend.flush(); + + expect(element.find('[data-block="header"]').html().trim()).toBe('

:header

'); + expect(element.find('[data-block="content"]').html().trim()).toBe('

:content

Bar

'); + expect(element.find('[data-block="footer"]').html().trim()).toBe('

:footer

'); + })); + + it('should support multiple inheritance', inject(function ($compile) { + var html = [ + '
', + '

{{ foo }}

', + '
' + ]; + + var element = angular.element(html.join('\n')); + element = $compile(element)($scope); + $scope.$digest(); + $httpBackend.flush(); + + expect(element.find('[data-block="header"]').html().trim()).toBe('

:sub-header

'); + expect(element.find('[data-block="content"]').html().trim()).toBe('

:content

Bar

'); + expect(element.find('[data-block="footer"]').html().trim()).toBe('

:footer

'); + })); + + it('should log a warning if the block is missing', inject(function ($compile, $log) { + var html = [ + '
', + '

{{ foo }}

', + '
' + ]; + + 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('

:header

'); + expect(element.find('[data-block="content"]').html().trim()).toBe('

:content

'); + expect(element.find('[data-block="footer"]').html().trim()).toBe('

:footer

'); + })); + + }); + });