fix(sidenav): allow for data bindings in md-component-id

Fixes the sidenav not evaluating expressions inside of the `md-component-id` attribute.

Fixes #9052.

Author: crisbeto

src/components/sidenav/sidenav.js

@@ -249,8 +249,7 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
     },
     controller: '$mdSidenavController',
     compile: function(element) {
-      element.addClass('md-closed');
-      element.attr('tabIndex', '-1');
+      element.addClass('md-closed').attr('tabIndex', '-1');
       return postLink;
     }
   };
@@ -481,9 +480,8 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate,
  * @ngdoc controller
  * @name SidenavController
  * @module material.components.sidenav
- *
  */
-function SidenavController($scope, $element, $attrs, $mdComponentRegistry, $q) {
+function SidenavController($scope, $attrs, $mdComponentRegistry, $q, $interpolate) {
 
   var self = this;
 
@@ -505,5 +503,10 @@ function SidenavController($scope, $element, $attrs, $mdComponentRegistry, $q) {
   self.toggle = function() { return self.$toggleOpen( !$scope.isOpen );  };
   self.$toggleOpen = function(value) { return $q.when($scope.isOpen = value); };
 
-  self.destroy = $mdComponentRegistry.register(self, $attrs.mdComponentId);
+  // Evaluate the component id.
+  var rawId = $attrs.mdComponentId;
+  var componentId = rawId && rawId.indexOf($interpolate.startSymbol()) > -1 ?
+    $interpolate(rawId)($scope.$parent) : rawId;
+
+  self.destroy = $mdComponentRegistry.register(self, componentId);
 }

src/components/sidenav/sidenav.spec.js

@@ -168,13 +168,13 @@ describe('mdSidenav', function() {
 
   describe('controller', function() {
     it('should create controller', function() {
-      var el = setup('');
+      var el = setup();
       var controller = el.controller('mdSidenav');
       expect(controller).not.toBe(undefined);
     });
 
     it('should open and close and toggle', inject(function($timeout) {
-      var el = setup('');
+      var el = setup();
       var scope = el.isolateScope();
       var controller = el.controller('mdSidenav');
 
@@ -213,7 +213,7 @@ describe('mdSidenav', function() {
     }));
 
     it('should open(), close(), and toggle() with promises', function() {
-      var el = setup('');
+      var el = setup();
       var scope = el.isolateScope();
       var controller = el.controller('mdSidenav');
 
@@ -257,7 +257,7 @@ describe('mdSidenav', function() {
     });
 
     it('should open() to work multiple times before close()', function() {
-      var el = setup('');
+      var el = setup();
       var controller = el.controller('mdSidenav');
 
       var openDone = 0, closeDone = 0;
@@ -351,23 +351,32 @@ describe('mdSidenav', function() {
   });
 
   describe('$mdSidenav lookups', function() {
-    var $rootScope, $timeout;
+    var $rootScope, $timeout, $mdSidenav;
 
-    beforeEach(inject(function(_$rootScope_, _$timeout_) {
+    beforeEach(inject(function(_$rootScope_, _$timeout_, _$mdSidenav_) {
       $rootScope = _$rootScope_;
       $timeout = _$timeout_;
+      $mdSidenav = _$mdSidenav_;
     }));
 
-    it('should find an instantiation using `$mdSidenav(id)`', inject(function($mdSidenav) {
+    it('should find an instantiation using `$mdSidenav(id)`', function() {
       var el = setup('md-component-id="left"');
       $timeout.flush();
 
       // Lookup instance still available in the component registry
       var instance = $mdSidenav('left');
       expect(instance).toBeTruthy();
-    }));
+    });
+
+    it('should find an instance that contains a data binding', function() {
+      var leftComponentId = $rootScope.leftComponentId = 'left';
+      var el = setup('md-component-id="{{ leftComponentId }}"');
+      var instance = $mdSidenav(leftComponentId, false);
+
+      expect(instance).toBeTruthy();
+    });
 
-    it('should find a deferred instantiation using `$mdSidenav(id, true)`', inject(function($mdSidenav) {
+    it('should find a deferred instantiation using `$mdSidenav(id, true)`', function() {
       var instance;
 
       // Lookup deferred (not existing) instance
@@ -386,9 +395,9 @@ describe('mdSidenav', function() {
       // Lookup instance still available in the component registry
       instance = $mdSidenav('left', true);
       expect(instance).toBeTruthy();
-    }));
+    });
 
-    it('should find a deferred instantiation using `$mdSidenav().waitFor(id)` ', inject(function($mdSidenav) {
+    it('should find a deferred instantiation using `$mdSidenav().waitFor(id)` ', function() {
       var instance;
 
       // Lookup deferred (not existing) instance
@@ -409,9 +418,9 @@ describe('mdSidenav', function() {
       instance = $mdSidenav('left');
 
       expect(instance).toBeTruthy();
-    }));
+    });
 
-    it('should not find a lazy instantiation without waiting `$mdSidenav(id)`', inject(function($mdSidenav) {
+    it('should not find a lazy instantiation without waiting `$mdSidenav(id)`', function() {
       var instance = $mdSidenav('left');
       expect(instance.isOpen).toBeDefined();    // returns legacy API with noops
 
@@ -425,9 +434,9 @@ describe('mdSidenav', function() {
       instance = $mdSidenav('left');            // returns instance
       expect(instance).toBeDefined();
       expect(instance.isOpen()).toBeFalsy();
-    }));
+    });
 
-    it('should not find a lazy instantiation without waiting `$mdSidenav().find(id)`', inject(function($mdSidenav) {
+    it('should not find a lazy instantiation without waiting `$mdSidenav().find(id)`', function() {
       var instance = $mdSidenav().find('left');
       expect(instance).toBeUndefined();
 
@@ -438,7 +447,7 @@ describe('mdSidenav', function() {
       instance = $mdSidenav().find('left');
       expect(instance).toBeDefined();
       expect(instance.isOpen()).toBeFalsy();
-    }));
+    });
 
     describe('onClose', function () {
       it('should call callback on escape', inject(function($mdSidenav, $rootScope, $material, $mdConstant, $timeout) {