feat(panel): Inject mdPanelRef when instantiating the panel controller.

Author: KarenParker

src/components/panel/demoBasicUsage/panel.tmpl.html

@@ -19,7 +19,7 @@ <h2>Surprise!</h2>
     <md-button flex class="md-primary">
       Nothing
     </md-button>
-    <md-button md-autofocus flex class="md-primary" ng-click="ctrl.closeFn()">
+    <md-button md-autofocus flex class="md-primary" ng-click="ctrl.closeDialog()">
       Close
     </md-button>
   </div>

src/components/panel/demoBasicUsage/script.js

@@ -1,6 +1,6 @@
 angular.module('panelDemo', ['ngMaterial'])
     .controller('BasicDemoCtrl', BasicDemoCtrl)
-    .controller('DialogCtrl', DialogCtrl);
+    .controller('PanelDialogCtrl', PanelDialogCtrl);
 
 
 function BasicDemoCtrl($mdPanel) {
@@ -16,12 +16,9 @@ BasicDemoCtrl.prototype.showDialog = function() {
 
   var config = {
     attachTo: angular.element(document.querySelector('.demo-md-panel')),
-    controller: DialogCtrl,
+    controller: PanelDialogCtrl,
     controllerAs: 'ctrl',
     templateUrl: 'panel.tmpl.html',
-    locals: {
-      closeFn: angular.bind(this, this.closeDialog)
-    },
     panelClass: 'demo-dialog-example',
     position: position,
     trapFocus: true,
@@ -32,10 +29,12 @@ BasicDemoCtrl.prototype.showDialog = function() {
 };
 
 
-BasicDemoCtrl.prototype.closeDialog = function() {
-  this._panelRef && this._panelRef.close();
-};
+// Necessary to pass locals to the dialog template.
+function PanelDialogCtrl(mdPanelRef) {
+  this._mdPanelRef = mdPanelRef;
+}
 
 
-// Necessary to pass locals to the dialog template.
-function DialogCtrl() { }
+PanelDialogCtrl.prototype.closeDialog = function() {
+  this._mdPanelRef && this._mdPanelRef.close();
+};

src/components/panel/panel.js

@@ -998,6 +998,10 @@ MdPanelRef.prototype.focusOnOpen = function() {
 MdPanelRef.prototype._createPanel = function() {
   var self = this;
   return this._$q(function(resolve, reject) {
+    if (!self._config.locals) {
+      self._config.locals = {};
+    }
+    self._config.locals.mdPanelRef = self;
     self._$mdCompiler.compile(self._config)
         .then(function(compileData) {
           self._panelContainer = compileData.link(self._config['scope']);

src/components/panel/panel.spec.js

@@ -9,6 +9,7 @@ describe('$mdPanel', function() {
   var FULLSCREEN_CLASS = '_md-panel-fullscreen';
   var DEFAULT_TEMPLATE = '<div>Hello World!</div>';
   var DEFAULT_CONFIG = { template: DEFAULT_TEMPLATE };
+  var PANEL_ID_PREFIX = 'panel_';
 
   /**
    * @param {!angular.$injector} $injector
@@ -597,12 +598,13 @@ describe('$mdPanel', function() {
 
     it('should allow locals to be injected in the controller', function() {
       var htmlContent = 'Tiramisu';
-      var template = '<div>{{ ctrl.content }}</div>';
+      var template = '<div>{{ ctrl.content }} {{ ctrl.myPanel.id }}</div>';
 
       var config = {
         template: template,
-        controller: function Ctrl(content) {
+        controller: function Ctrl(content, mdPanelRef) {
           this.content = content;
+          this.myPanel = mdPanelRef;
         },
         controllerAs: 'ctrl',
         locals: { content: htmlContent },
@@ -612,16 +614,18 @@ describe('$mdPanel', function() {
       openPanel(config);
 
       expect(PANEL_EL).toContainHtml(htmlContent);
+      expect(PANEL_EL).toContainHtml(PANEL_ID_PREFIX);
     });
 
     it('should bind locals to the controller', function() {
       var htmlContent = 'Apple Pie';
-      var template = '<div>{{ ctrl.content }}</div>';
+      var template = '<div>{{ ctrl.content }} {{ ctrl.mdPanelRef.id }}</div>';
 
       var config = {
         template: template,
         controller: function Ctrl() {
           this.content; // Populated via bindToController.
+          this.mdPanelRef;
         },
         controllerAs: 'ctrl',
         locals: { content: htmlContent }
@@ -630,6 +634,36 @@ describe('$mdPanel', function() {
       openPanel(config);
 
       expect(PANEL_EL).toContainHtml(htmlContent);
+      expect(PANEL_EL).toContainHtml(PANEL_ID_PREFIX);
+    });
+
+    it('should inject mdPanelRef to the controller', function() {
+      var htmlContent = 'Cupcake';
+      var template =
+          '<button ng-click="ctrl.closeSelf()">{{ ctrl.content }}</button>';
+
+      function Ctrl() {
+        this.content; // Populated via bindToController.
+        this.mdPanelRef;
+      }
+
+      Ctrl.prototype.closeSelf = function() {
+        this.mdPanelRef.close();
+      };
+
+      var config = {
+        template: template,
+        controller: Ctrl,
+        controllerAs: 'ctrl',
+        locals: { content: htmlContent }
+      };
+
+      openPanel(config);
+
+      expect(PANEL_EL).toContainHtml(htmlContent);
+
+      document.querySelector(PANEL_EL + ' button').click();
+      expect(PANEL_EL).not.toExist();
     });
   });