fix(fabToolbar): Fix md-direction attribute to be a string instead of…

… expression.

Fix `md-direction` attribute to use the correct scope initialization.

Fixes angular#3390. Closes angular#4185.

src/components/fabToolbar/demoBasicUsage/index.html

@@ -12,7 +12,8 @@
  </p>
  </md-content>
 
- <md-fab-toolbar md-open="demo.isOpen" count="demo.count" md-direction="demo.selectedDirection">
+ <md-fab-toolbar md-open="demo.isOpen" count="demo.count"
+ md-direction="{{demo.selectedDirection}}">
  <md-fab-trigger class="align-with-text">
  <md-button aria-label="menu" class="md-fab md-primary">
  <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
@@ -55,4 +56,4 @@
  </div>
  </div>
  </md-content>
-</div>
+</div>

src/components/fabToolbar/fabToolbar.js

@@ -79,7 +79,7 @@
  '</div>',
 
  scope: {
- direction: '=?mdDirection',
+ direction: '@?mdDirection',
  isOpen: '=?mdOpen'
  },
 

src/components/fabToolbar/fabToolbar.spec.js

@@ -14,6 +14,26 @@ describe('<md-fab-toolbar> directive', function() {
  });
  }
 
+ it('applies a class for each direction', inject(function() {
+ build(
+ '<md-fab-toolbar md-direction="{{direction}}"></md-fab-toolbar>'
+ );
+
+ pageScope.$apply('direction = "left"');
+ expect(element.hasClass('md-left')).toBe(true);
+
+ pageScope.$apply('direction = "right"');
+ expect(element.hasClass('md-right')).toBe(true);
+ }));
+
+ it('accepts a string for md-direction', inject(function() {
+ build(
+ '<md-fab-toolbar md-direction="right"></md-fab-toolbar>'
+ );
+
+ expect(element.hasClass('md-right')).toBe(true);
+ }));
+
  it('allows programmatic opening through the md-open attribute', inject(function() {
  build(
  '<md-fab-toolbar md-open="isOpen"></md-fab-toolbar>'