feat(navBar): add disabled attribute

src/components/navBar/demoBasicUsage/index.html

@@ -7,12 +7,15 @@
       <md-nav-item md-nav-click="goto('page1')" name="page1">
         Page One
       </md-nav-item>
-      <md-nav-item md-nav-click="goto('page2')" name="page2">
+      <md-nav-item md-nav-click="goto('page2')" name="page2" ng-disabled="secondTabDisabled">
         Page Two
       </md-nav-item>
       <md-nav-item md-nav-click="goto('page3')" name="page3">
         Page Three
       </md-nav-item>
+      <md-nav-item md-nav-click="goto('page4')" name="page4" disabled>
+        Page Four
+      </md-nav-item>
       <!-- these require actual routing with ui-router or ng-route, so they
       won't work in the demo
       <md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
@@ -29,5 +32,9 @@
 
     <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
 
+    <md-checkbox ng-model="secondTabDisabled" aria-label="Disable Second Tab" style="margin: 5px;">
+      Disable Second Tab
+    </md-checkbox>
+
   </md-content>
-</div>
+</div>

src/components/navBar/navBar.js

@@ -429,6 +429,7 @@ function MdNavItem($mdAria, $$rAF) {
           '<md-button class="_md-nav-button md-accent" ' +
             'ng-class="ctrl.getNgClassMap()" ' +
             'ng-blur="ctrl.setFocused(false)" ' +
+            'ng-disabled="ctrl.disabled"' +
             'tabindex="-1" ' +
             navigationOptions +
             navigationAttribute + '>' +
@@ -469,6 +470,10 @@ function MdNavItem($mdAria, $$rAF) {
           scope.$apply();
         });
 
+        attrs.$observe('disabled', function (value) {
+          mdNavItem.disabled = value.length === 0 ? true : !!value;
+        });
+
         $mdAria.expectWithText(element, 'aria-label');
       });
     }

src/components/navBar/navBar.scss

@@ -38,6 +38,11 @@ $md-nav-bar-height: 48px;
   &:hover {
     background-color: inherit;
   }
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }
 
 md-nav-ink-bar {

src/components/navBar/navBar.spec.js

@@ -176,6 +176,39 @@ describe('mdNavBar', function() {
               .toBe('{"reload":true,"notify":true}');
         });
 
+      it('should set the disabled attribute', function() {
+          create('<md-nav-bar>' +
+              '  <md-nav-item md-nav-href="#1" name="tab1">' +
+              '    tab1' +
+              '  </md-nav-item>' +
+              '  <md-nav-item md-nav-href="#2" name="tab2" disabled>' +
+              '    tab2' +
+              '  </md-nav-item>' +
+              '</md-nav-bar>');
+
+          var tabCtrl = getTabCtrl('tab2');
+          expect(tabCtrl.disabled).toBe(true);
+      });
+
+      it('should observe the disabled attribute', function() {
+          $scope.tabDisabled = false;
+          create('<md-nav-bar>' +
+              '  <md-nav-item md-nav-href="#1" name="tab1">' +
+              '    tab1' +
+              '  </md-nav-item>' +
+              '  <md-nav-item md-nav-href="#2" name="tab2" ng-disabled="tabDisabled">' +
+              '    tab2' +
+              '  </md-nav-item>' +
+              '</md-nav-bar>');
+          var tabCtrl = getTabCtrl('tab2');
+          expect(tabCtrl.disabled).toBe(false);
+          $scope.tabDisabled = true;
+          $scope.$apply();
+          expect(tabCtrl.disabled).toBe(true);
+      });
+
+
+
     it('does not update tabs if tab controller is undefined', function() {
       $scope.selectedTabRoute = 'tab1';