feat(compiler): respect preAssignBindingsEnabled state (#10726)

1. The `$mdCompiler` is now able to respect the `preAssignBindingsEnabled` state
when using AngularJS 1.5.10 or higher; to enable, invoke:

    $mdCompilerProvider.respectPreAssignBindingsEnabled(true);

2. `$mdCompiler` now understands the `$onInit` lifecycle hooks in controllers.
Note that no other AngularJS 1.5+ lifecycle hooks are supported currently.

Invoking:

    $mdCompilerProvider.respectPreAssignBindingsEnabled(true);

will make bindings in Material custom components like `$mdDialog` or `$mdToast`
only available in controller constructors if they are available in constructors
of all other AngularJS controllers. By default this will happen in AngularJS
1.6 or newer. This can also be achieved with AngularJS >=1.5.10 <1.6.0 if:

    $compilerProvider.preAssignBindingsEnabled(false);

is invoked.

Example:

```js
$mdDialog.show({
  locals: {
    myVar: true
  },
  controller: MyController,
  bindToController: true
}

function MyController() {
  // No locals from Angular Material are set yet. e.g myVar is undefined.
}

MyController.prototype.$onInit = function() {
  // Bindings are now set in the $onInit lifecycle hook.
}
```

Huge thanks to Paul Gschwendtner (@devversion) for the initial draft version of
this feature.

Fixes #10016
Ref #10469
Closes #10726

Author: mgol

config/karma.conf.js

@@ -49,6 +49,7 @@ module.exports = function(config) {
     basePath: __dirname + '/..',
     frameworks: ['jasmine'],
     files: dependencies.concat(testSrc),
+    customLaunchers: require('./sauce-browsers.json'),
 
     browserDisconnectTimeout:500,
 

package.json

@@ -61,7 +61,8 @@
     "jquery": "^3.0.0",
     "jshint": "^2.9.2",
     "jshint-summary": "^0.4.0",
-    "karma": "^1.0.0",
+    "karma": "^1.7.0",
+    "karma-browserstack-launcher": "^1.2.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-firefox-launcher": "^1.0.0",
     "karma-jasmine": "^1.0.2",
@@ -84,4 +85,4 @@
     "merge-base": "git merge-base $(npm run -s current-branch) origin/master",
     "squash": "git rebase -i $(npm run -s merge-base)"
   }
-}
+}

src/components/dialog/dialog.js

@@ -603,7 +603,7 @@ function MdDialogProvider($$interimElementProvider) {
     });
 
   /* @ngInject */
-  function advancedDialogOptions($mdDialog, $mdConstant) {
+  function advancedDialogOptions() {
     return {
       template: [
         '<md-dialog md-theme="{{ dialog.theme || dialog.defaultTheme }}" aria-label="{{ dialog.ariaLabel }}" ng-class="dialog.css">',
@@ -631,30 +631,40 @@ function MdDialogProvider($$interimElementProvider) {
         '  </md-dialog-actions>',
         '</md-dialog>'
       ].join('').replace(/\s\s+/g, ''),
-      controller: function mdDialogCtrl() {
-        var isPrompt = this.$type == 'prompt';
-
-        if (isPrompt && this.initialValue) {
-          this.result = this.initialValue;
-        }
-
-        this.hide = function() {
-          $mdDialog.hide(isPrompt ? this.result : true);
-        };
-        this.abort = function() {
-          $mdDialog.cancel();
-        };
-        this.keypress = function($event) {
-          if ($event.keyCode === $mdConstant.KEY_CODE.ENTER) {
-            $mdDialog.hide(this.result);
-          }
-        };
-      },
+      controller: MdDialogController,
       controllerAs: 'dialog',
       bindToController: true,
     };
   }
 
+  /**
+   * Controller for the md-dialog interim elements
+   * @ngInject
+   */
+  function MdDialogController($mdDialog, $mdConstant) {
+    // For compatibility with AngularJS 1.6+, we should always use the $onInit hook in
+    // interimElements. The $mdCompiler simulates the $onInit hook for all versions.
+    this.$onInit = function() {
+      var isPrompt = this.$type == 'prompt';
+
+      if (isPrompt && this.initialValue) {
+        this.result = this.initialValue;
+      }
+
+      this.hide = function() {
+        $mdDialog.hide(isPrompt ? this.result : true);
+      };
+      this.abort = function() {
+        $mdDialog.cancel();
+      };
+      this.keypress = function($event) {
+        if ($event.keyCode === $mdConstant.KEY_CODE.ENTER) {
+          $mdDialog.hide(this.result);
+        }
+      };
+    };
+  }
+
   /* @ngInject */
   function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement,
                                 $log, $injector, $mdTheming, $interpolate, $mdInteraction) {

src/components/toast/toast.js

@@ -321,24 +321,7 @@ function MdToastProvider($$interimElementProvider) {
             '    </md-button>' +
             '  </div>' +
             '</md-toast>',
-          controller: /* @ngInject */ function mdToastCtrl($scope) {
-            var self = this;
-
-            if (self.highlightAction) {
-              $scope.highlightClasses = [
-                'md-highlight',
-                self.highlightClass
-              ]
-            }
-
-            $scope.$watch(function() { return activeToastContent; }, function() {
-              self.content = activeToastContent;
-            });
-
-            this.resolve = function() {
-              $mdToast.hide( ACTION_RESOLVE );
-            };
-          },
+          controller: MdToastController,
           theme: $mdTheming.defaultTheme(),
           controllerAs: 'toast',
           bindToController: true
@@ -354,6 +337,33 @@ function MdToastProvider($$interimElementProvider) {
 
     return $mdToast;
 
+  /**
+   * Controller for the Toast interim elements.
+   * @ngInject
+   */
+  function MdToastController($mdToast, $scope) {
+    // For compatibility with AngularJS 1.6+, we should always use the $onInit hook in
+    // interimElements. The $mdCompiler simulates the $onInit hook for all versions.
+    this.$onInit = function() {
+      var self = this;
+
+      if (self.highlightAction) {
+        $scope.highlightClasses = [
+          'md-highlight',
+          self.highlightClass
+        ]
+      }
+
+      $scope.$watch(function() { return activeToastContent; }, function() {
+        self.content = activeToastContent;
+      });
+
+      this.resolve = function() {
+        $mdToast.hide( ACTION_RESOLVE );
+      };
+    }
+  }
+
   /* @ngInject */
   function toastDefaultOptions($animate, $mdToast, $mdUtil, $mdMedia) {
     var SWIPE_EVENTS = '$md.swipeleft $md.swiperight $md.swipeup $md.swipedown';