fix(compiler): assign bindings to controller instance when using an ES6 (angular#10977)

class and preAssignBindingsEnabled == false

feat(navBar): add disabled attribute

* Originally developed by: @maxjoehnk . I'm just resubmitting
* Add disabled attribute to navitem
* Update demo to showcase ng-disabled and disabled usage
* Add tests
* Ignore navbar specific button styling when disabled

fixes angular#9667

feat(navBar): add disabled attribute

* Implemented suggested changes to follow the convention and use parseAttributeBoolean() function from $mdUtils

feat(navBar): add disabled attribute

* Implemented suggested changes added MutationObserver and removed unnecessary style changes

Author: jelbourn

package-lock.json

@@ -85,4 +85,4 @@
     "test:fast": "gulp karma-fast",
     "test:full": "gulp karma"
   }
-}
+}

package.json

@@ -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/demoBasicUsage/index.html

@@ -388,7 +388,7 @@ MdNavBarController.prototype.onKeydown = function(e) {
 /**
  * @ngInject
  */
-function MdNavItem($mdAria, $$rAF) {
+function MdNavItem($mdAria, $$rAF, $mdUtil, $window) {
   return {
     restrict: 'E',
     require: ['mdNavItem', '^mdNavBar'],
@@ -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 + '>' +
@@ -454,11 +455,11 @@ function MdNavItem($mdAria, $$rAF) {
       // When accessing the element's contents synchronously, they
       // may not be defined yet because of transclusion. There is a higher
       // chance that it will be accessible if we wait one frame.
+      var disconnect;
       $$rAF(function() {
         var mdNavItem = controllers[0];
         var mdNavBar = controllers[1];
         var navButton = angular.element(element[0].querySelector('._md-nav-button'));
-
         if (!mdNavItem.name) {
           mdNavItem.name = angular.element(element[0]
               .querySelector('._md-nav-button-text')).text().trim();
@@ -469,8 +470,30 @@ function MdNavItem($mdAria, $$rAF) {
           scope.$apply();
         });
 
+        if('MutationObserver' in $window) {
+          var config = {attributes: true, attributeFilter: ['disabled']};
+          var targetNode = element[0];
+          var mutationCallback = function(mutationList) {
+            $mdUtil.nextTick(function() {
+              mdNavItem.disabled = $mdUtil.parseAttributeBoolean(attrs[mutationList[0].attributeName], false);
+            });
+          };
+          var observer = new MutationObserver(mutationCallback);
+          observer.observe(targetNode, config);
+          disconnect = observer.disconnect.bind(observer);
+        } else {
+          attrs.$observe('disabled', function (value) {
+            mdNavItem.disabled = $mdUtil.parseAttributeBoolean(value, false);
+          });
+        }
+
+
         $mdAria.expectWithText(element, 'aria-label');
       });
+
+      scope.$on('destroy', function() {
+        disconnect();
+      })
     }
   };
 }

src/components/navBar/navBar.js

@@ -38,6 +38,7 @@ $md-nav-bar-height: 48px;
   &:hover {
     background-color: inherit;
   }
+
 }
 
 md-nav-ink-bar {

src/components/navBar/navBar.scss

@@ -176,6 +176,37 @@ 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';
 

src/components/navBar/navBar.spec.js

@@ -369,6 +369,13 @@ function MdCompilerProvider($compileProvider) {
    * @returns {!Object} Created controller instance.
    */
   MdCompilerService.prototype._createController = function(options, injectLocals, locals) {
+    // The third and fourth arguments to $controller are considered private and are undocumented:
+    // https://github.com/angular/angular.js/blob/master/src/ng/controller.js#L86
+    // Passing `true` as the third argument causes `$controller` to return a function that
+    // gets the controller instance instead returning of the instance directly. When the
+    // controller is defined as a function, `invokeCtrl.instance` is the *same instance* as
+    // `invokeCtrl()`. However, then the controller is an ES6 class, `invokeCtrl.instance` is a
+    // *different instance* from `invokeCtrl()`.
     var invokeCtrl = this.$controller(options.controller, injectLocals, true, options.controllerAs);
 
     if (getPreAssignBindingsEnabled() && options.bindToController) {
@@ -379,7 +386,7 @@ function MdCompilerProvider($compileProvider) {
     var ctrl = invokeCtrl();
 
     if (!getPreAssignBindingsEnabled() && options.bindToController) {
-      angular.extend(invokeCtrl.instance, locals);
+      angular.extend(ctrl, locals);
     }
 
     // Call the $onInit hook if it's present on the controller.

src/core/services/compiler/compiler.js

@@ -427,5 +427,50 @@ describe('$mdCompiler service', function() {
 
   });
 
+  describe('with respectPreAssignBindingsEnabled and not preAssignBindingsEnabled', function() {
+    var $mdCompiler, pageScope, $rootScope;
+
+    beforeEach(module('material.core'));
+
+    beforeEach(module(function($mdCompilerProvider, $compileProvider) {
+      $mdCompilerProvider.respectPreAssignBindingsEnabled(true);
+
+      // preAssignBindingsEnabled is removed in Angular 1.7, so we only explicitly turn it
+      // on if the option exists.
+      if ($compileProvider.hasOwnProperty('preAssignBindingsEnabled')) {
+        $compileProvider.preAssignBindingsEnabled(false);
+      }
+    }));
+
+    beforeEach(inject(function($injector) {
+      $mdCompiler = $injector.get('$mdCompiler');
+      $rootScope = $injector.get('$rootScope');
+      pageScope = $rootScope.$new();
+    }));
+
+    it('should assign bindings by $onInit for ES6 classes', function(done) {
+      // This will not work in IE11, but the AngularJS Material CI is only running Chrome.
+      class PizzaController {
+        $onInit() { this.isInitialized = true; }
+      }
+
+      var compileResult = $mdCompiler.compile({
+        template: '<span>Pizza</span>',
+        controller: PizzaController,
+        controllerAs: 'pizzaCtrl',
+        bindToController: true,
+        locals: {topping: 'Cheese'},
+      });
+
+      compileResult.then(function(compileOutput) {
+        var ctrl = compileOutput.link(pageScope).scope().pizzaCtrl;
+        expect(ctrl.isInitialized).toBe(true);
+        expect(ctrl.topping).toBe('Cheese');
+        done();
+      });
+
+      $rootScope.$apply();
+    });
+  });
 
 });