fix(mdToolbar): Better fix for ng-if that allows ng-controller.

src/components/toolbar/demoScrollShrink/index.html

@@ -1,9 +1,9 @@
 <div ng-controller="AppCtrl" layout="column" style="height:600px">
 
-  <md-toolbar md-scroll-shrink>
+  <md-toolbar md-scroll-shrink ng-if="true" ng-controller="TitleController">
     <div class="md-toolbar-tools">
       <h3>
-        <span>My App Title</span>
+        <span>{{title}}</span>
       </h3>
     </div>
   </md-toolbar>

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

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: '<div ng-transclude></div>',
-    transclude: true,
-    controller: angular.noop,
-    scope: {
-      scrollShrink: '=?mdScrollShrink'
-    },
+
     link: function(scope, element, attr) {
 
       $mdTheming(element);
@@ -97,15 +96,15 @@ 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
         scope.$on('$destroy', function() {
           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

src/components/toolbar/toolbar.spec.js

@@ -3,7 +3,11 @@ describe('<md-toolbar>', 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('<md-toolbar>', 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('<md-toolbar>', 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(
       '<div>' +
-      '  <md-toolbar md-scroll-shrink></md-toolbar>' +
+      '  <md-toolbar md-scroll-shrink ng-controller="MockController"></md-toolbar>' +
       '  <md-content></md-content>' +
       '</div>'
     );
 
-    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(
       '<div>' +
-      '  <md-toolbar md-scroll-shrink="shouldShrink"></md-toolbar>' +
+      '  <md-toolbar md-scroll-shrink></md-toolbar>' +
       '  <md-content></md-content>' +
       '</div>'
     );
 
-    // 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');
   });