fix(ripple): fixes js error on button click for date picker

src/core/services/ripple/ripple.js

@@ -51,18 +51,29 @@ function InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdU
  this.options = rippleOptions;
  this.mousedown = false;
  this.ripples = [];
- this.container = null;
- this.color = null;
- this.background = null;
  this.timeout = null; // Stores a reference to the most-recent ripple timeout
  this.lastRipple = null;
 
+ this.valueOnUse('container', angular.bind(this, this.createContainer));
+ this.valueOnUse('color', angular.bind(this, this.getColor, 1));
+ this.valueOnUse('background', angular.bind(this, this.getColor, 0.5));
+
  // attach method for unit tests
  ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);
 
  this.bindEvents();
 }
 
+InkRippleCtrl.prototype.valueOnUse = function (key, getter) {
+ var value = null;
+ Object.defineProperty(this, key, {
+ get: function () {
+ if (value === null) value = getter();
+ return value;
+ }
+ });
+};
+
 /**
  * Returns the color that the ripple should be (either based on CSS or hard-coded)
  * @returns {string}
@@ -189,10 +200,6 @@ InkRippleCtrl.prototype.clearTimeout = function () {
  * @param top
  */
 InkRippleCtrl.prototype.createRipple = function (left, top) {
- if (!this.container) this.container = this.createContainer();
- if (!this.color) this.color = this.getColor();
- if (!this.background) this.background = this.getColor(0.5);
-
  var ctrl = this;
  var ripple = angular.element('<div class="md-ripple"></div>');
  var width = this.$element.prop('clientWidth');