diff --git a/src/components/toolbar/demoScrollShrink/index.html b/src/components/toolbar/demoScrollShrink/index.html index ba593a38b93..8e7d6912d82 100644 --- a/src/components/toolbar/demoScrollShrink/index.html +++ b/src/components/toolbar/demoScrollShrink/index.html @@ -1,9 +1,9 @@
- +

- My App Title + {{title}}

diff --git a/src/components/toolbar/demoScrollShrink/script.js b/src/components/toolbar/demoScrollShrink/script.js index 74fa82b1c44..04b8f291e34 100644 --- a/src/components/toolbar/demoScrollShrink/script.js +++ b/src/components/toolbar/demoScrollShrink/script.js @@ -1,5 +1,9 @@ var app = angular.module('toolbarDemo2', ['ngMaterial']); +app.controller('TitleController', function($scope) { + $scope.title = 'My App Title'; +}); + app.controller('AppCtrl', function($scope) { var imagePath = 'img/list/60.jpeg'; diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js index 80e4a1a11db..6e60ee0114a 100644 --- a/src/components/toolbar/toolbar.js +++ b/src/components/toolbar/toolbar.js @@ -47,8 +47,12 @@ angular.module('material.components.toolbar', [ * * @param {boolean=} md-scroll-shrink Whether the header should shrink away as * the user scrolls down, and reveal itself as the user scrolls up. - * Note: for scrollShrink to work, the toolbar must be a sibling of a - * `md-content` element, placed before it. See the scroll shrink demo. + * + * _**Note:** for scrollShrink to work, the toolbar must be a sibling of a + * `md-content` element, placed before it. See the scroll shrink demo._ + * + * _**Note:** The `md-scroll-shrink` attribute is only parsed on component + * initialization, it does not watch for scope changes._ * * * @param {number=} md-shrink-speed-factor How much to change the speed of the toolbar's @@ -61,12 +65,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) { return { restrict: 'E', - template: '
', - transclude: true, - controller: angular.noop, - scope: { - scrollShrink: '=?mdScrollShrink' - }, + link: function(scope, element, attr) { $mdTheming(element); @@ -97,7 +96,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) { // If the toolbar is used inside an ng-if statement, we may miss the // $mdContentLoaded event, so we attempt to fake it if we have a // md-content close enough. - scope.$watch('scrollShrink', onChangeScrollShrink); + attr.$observe('mdScrollShrink', onScrollShrinkDefined); // If the scope is destroyed (which could happen with ng-if), make sure // to disable scroll shrinking again @@ -105,7 +104,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) { disableScrollShrink(); }); - function onChangeScrollShrink(scrollShrink) { + function onScrollShrinkDefined(scrollShrink) { var closestContent = element.parent().find('md-content'); // If we have a content element, fake the call; this might still fail diff --git a/src/components/toolbar/toolbar.spec.js b/src/components/toolbar/toolbar.spec.js index 23744c576ab..03e06393605 100644 --- a/src/components/toolbar/toolbar.spec.js +++ b/src/components/toolbar/toolbar.spec.js @@ -3,7 +3,11 @@ describe('', function() { var pageScope, element, controller; var $rootScope, $timeout; - beforeEach(module('material.components.toolbar')); + beforeEach(function() { + module('material.components.toolbar', function($controllerProvider) { + $controllerProvider.register('MockController', function() {}); + }); + }); beforeEach(inject(function(_$rootScope_, _$timeout_) { $rootScope = _$rootScope_; $timeout = _$timeout_; @@ -45,7 +49,8 @@ describe('', function() { // Manually link so we can give our own elements with spies on them mdToolbarDirective[0].link($rootScope, toolbar, { mdScrollShrink: true, - mdShrinkSpeedFactor: 1 + mdShrinkSpeedFactor: 1, + $observe: function() {} }); $rootScope.$apply(); @@ -112,35 +117,27 @@ describe('', function() { expect(element.find('md-content').attr('scroll-shrink')).toEqual('false'); })); - it('enables scroll shrink when the attribute has no value', function() { + // The toolbar is like a container component, so we want to make sure it works with ng-controller + it('works with ng-controller', inject(function($exceptionHandler) { build( '
' + - ' ' + + ' ' + ' ' + '
' ); - expect(element.find('md-content').attr('scroll-shrink')).toEqual('true'); - }); + // Expect no errors + expect($exceptionHandler.errors).toEqual([]); + })); - it('watches the value of scroll shrink', function() { + it('enables scroll shrink when the attribute has no value', function() { build( '
' + - ' ' + + ' ' + ' ' + '
' ); - // It starts out undefined which SHOULD add the scroll shrink because it acts as if no value - // was specified - expect(element.find('md-content').attr('scroll-shrink')).toEqual('true'); - - // Change the scrollShink to false - pageScope.$apply('shouldShrink = false'); - expect(element.find('md-content').attr('scroll-shrink')).toEqual('false'); - - // Change the scrollShink to true - pageScope.$apply('shouldShrink = true'); expect(element.find('md-content').attr('scroll-shrink')).toEqual('true'); });