Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
feat(compiler): respect preAssignBindingsEnabled state (#10726)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
mgol authored and tinayuangao committed Aug 3, 2017
1 parent 72f930b commit fa997b9
Show file tree
Hide file tree
Showing 6 changed files with 526 additions and 255 deletions.
1 change: 1 addition & 0 deletions config/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ module.exports = function(config) {
basePath: __dirname + '/..',
frameworks: ['jasmine'],
files: dependencies.concat(testSrc),
customLaunchers: require('./sauce-browsers.json'),

browserDisconnectTimeout:500,

Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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)"
}
}
}
50 changes: 30 additions & 20 deletions src/components/dialog/dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">',
Expand Down Expand Up @@ -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) {
Expand Down
46 changes: 28 additions & 18 deletions src/components/toast/toast.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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';
Expand Down
Loading

0 comments on commit fa997b9

Please sign in to comment.