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');
});