feat(md-nav-item): Support for ui-sref-opts on md-nav-item (#9782)

Options can now be passed through the `sref-opts` attribute on the
`md-nav-item` element to the `ui-sref-opts` attribute that will be
added to the rendered DOM element. All known options from the
[`ui-router-opts` wiki](https://ui-router.github.io/docs/latest/interfaces/transition.transitionoptions.html)
are supported.

Fixes #9481

Author: bradrich

src/components/navBar/demoBasicUsage/index.html

@@ -1,15 +1,25 @@
 <div ng-controller="AppCtrl" ng-cloak>
   <md-content class="md-padding">
-    <md-nav-bar md-selected-nav-item="currentNavItem"
-                md-no-ink-bar="disableInkBar"
-                nav-bar-aria-label="navigation links">
-
-      <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
-      <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
-      <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
-      <!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
-      <md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
-      <md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
+    <md-nav-bar
+      md-selected-nav-item="currentNavItem"
+      nav-bar-aria-label="navigation links">
+      <md-nav-item md-nav-click="goto('page1')" name="page1">
+        Page One
+      </md-nav-item>
+      <md-nav-item md-nav-click="goto('page2')" name="page2">
+        Page Two
+      </md-nav-item>
+      <md-nav-item md-nav-click="goto('page3')" name="page3">
+        Page Three
+      </md-nav-item>
+      <!-- these require actual routing with ui-router or ng-route, so they
+      won't work in the demo
+      <md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
+      <md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
+      You can also add options for the <code>ui-sref-opts</code> attribute.
+      <md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
+        Page Six
+      </md-nav-item>
       -->
     </md-nav-bar>
     <div class="ext-content">

src/components/navBar/navBar.js

@@ -35,16 +35,24 @@ angular.module('material.components.navBar', ['material.core'])
  * https://www.w3.org/TR/wai-aria-practices/#Site_Navigator_Tabbed_Style
  *
  * @param {string=} mdSelectedNavItem The name of the current tab; this must
- * match the name attribute of `<md-nav-item>`
+ *     match the name attribute of `<md-nav-item>`
  * @param {boolean=} mdNoInkBar If set to true, the ink bar will be hidden.
  * @param {string=} navBarAriaLabel An aria-label for the nav-bar
  *
  * @usage
  * <hljs lang="html">
  *  <md-nav-bar md-selected-nav-item="currentNavItem">
- *    <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
- *    <md-nav-item md-nav-sref="app.page2" name="page2">Page Two</md-nav-item>
- *    <md-nav-item md-nav-href="#page3" name="page3">Page Three</md-nav-item>
+ *    <md-nav-item md-nav-click="goto('page1')" name="page1">
+ *      Page One
+ *    </md-nav-item>
+ *    <md-nav-item md-nav-href="#page2" name="page3">Page Two</md-nav-item>
+ *    <md-nav-item md-nav-sref="page3" name="page2">Page Three</md-nav-item>
+ *    <md-nav-item
+ *      md-nav-sref="app.page4"
+ *      sref-opts="{reload: true, notify: true}"
+ *      name="page4">
+ *      Page Four
+ *    </md-nav-item>
  *  </md-nav-bar>
  *</hljs>
  * <hljs lang="js">
@@ -72,17 +80,20 @@ angular.module('material.components.navBar', ['material.core'])
  * `<md-nav-item>` describes a page navigation link within the `<md-nav-bar>`
  * component. It renders an md-button as the actual link.
  *
- * Exactly one of the mdNavClick, mdNavHref, mdNavSref attributes are required to be
- * specified.
+ * Exactly one of the mdNavClick, mdNavHref, mdNavSref attributes are required
+ * to be specified.
  *
  * @param {Function=} mdNavClick Function which will be called when the
- * link is clicked to change the page. Renders as an `ng-click`.
+ *     link is clicked to change the page. Renders as an `ng-click`.
  * @param {string=} mdNavHref url to transition to when this link is clicked.
- * Renders as an `ng-href`.
+ *     Renders as an `ng-href`.
  * @param {string=} mdNavSref Ui-router state to transition to when this link is
- * clicked. Renders as a `ui-sref`.
+ *     clicked. Renders as a `ui-sref`.
+ * @param {!Object=} srefOpts Ui-router options that are passed to the
+ *     `$state.go()` function. See the [Ui-router documentation for details]
+ *     (https://ui-router.github.io/docs/latest/interfaces/transition.transitionoptions.html).
  * @param {string=} name The name of this link. Used by the nav bar to know
- * which link is currently selected.
+ *     which link is currently selected.
  *
  * @usage
  * See `<md-nav-bar>` for usage.
@@ -394,7 +405,9 @@ function MdNavItem($$rAF) {
       var hasNavClick = tAttrs.mdNavClick;
       var hasNavHref = tAttrs.mdNavHref;
       var hasNavSref = tAttrs.mdNavSref;
+      var hasSrefOpts = tAttrs.srefOpts;
       var navigationAttribute;
+      var navigationOptions;
       var buttonTemplate;
 
       // Cannot specify more than one nav attribute
@@ -412,42 +425,49 @@ function MdNavItem($$rAF) {
       } else if (hasNavSref) {
         navigationAttribute = 'ui-sref="{{ctrl.mdNavSref}}"';
       }
+      
+      navigationOptions = hasSrefOpts ? 'ui-sref-opts="{{ctrl.srefOpts}}" ' : '';
 
       if (navigationAttribute) {
         buttonTemplate = '' +
           '<md-button class="_md-nav-button md-accent" ' +
             'ng-class="ctrl.getNgClassMap()" ' +
             'tabindex="-1" ' +
+            navigationOptions +
             navigationAttribute + '>' +
             '<span ng-transclude class="_md-nav-button-text"></span>' +
           '</md-button>';
       }
 
       return '' +
-        '<li class="md-nav-item" role="option" aria-selected="{{ctrl.isSelected()}}">' +
+        '<li class="md-nav-item" ' +
+          'role="option" ' +
+          'aria-selected="{{ctrl.isSelected()}}">' +
           (buttonTemplate || '') +
         '</li>';
     },
     scope: {
       'mdNavClick': '&?',
       'mdNavHref': '@?',
       'mdNavSref': '@?',
+      'srefOpts': '=?',
       'name': '@',
     },
     link: function(scope, element, attrs, controllers) {
       var mdNavItem = controllers[0];
       var mdNavBar = controllers[1];
 
       // When accessing the element's contents synchronously, they
-      // may not be defined yet because of transclusion. There is a higher chance
-      // that it will be accessible if we wait one frame.
+      // may not be defined yet because of transclusion. There is a higher
+      // chance that it will be accessible if we wait one frame.
       $$rAF(function() {
         if (!mdNavItem.name) {
-          mdNavItem.name = angular.element(element[0].querySelector('._md-nav-button-text'))
-            .text().trim();
+          mdNavItem.name = angular.element(element[0]
+              .querySelector('._md-nav-button-text')).text().trim();
         }
 
-        var navButton = angular.element(element[0].querySelector('._md-nav-button'));
+        var navButton = angular.element(element[0]
+            .querySelector('._md-nav-button'));
         navButton.on('click', function() {
           mdNavBar.mdSelectedNavItem = mdNavItem.name;
           scope.$apply();
@@ -477,6 +497,10 @@ function MdNavItemController($element) {
   /** @const {?string} */
   this.mdNavHref;
 
+  /** @const {?string} */
+  this.mdNavSref;
+  /** @const {?Object} */
+  this.srefOpts;
   /** @const {?string} */
   this.name;
 

src/components/navBar/navBar.spec.js

@@ -158,6 +158,23 @@ describe('mdNavBar', function() {
 
       expect($scope.selectedTabRoute).toBe('tab2');
     });
+
+    it('adds ui-sref-opts attribute to nav item when sref-opts attribute is ' +
+        'defined', function() {
+          create(
+            '<md-nav-bar md-selected-nav-item="selected" nav-bar-aria-label="nav">' +
+              '<md-nav-item md-nav-sref="page1">' +
+                'tab1' +
+              '</md-nav-item>' +
+              '<md-nav-item md-nav-sref="page2" sref-opts="{reload:true,notify:true}">' +
+                'tab2' +
+              '</md-nav-item>' +
+            '</md-nav-bar>'
+          );
+
+          expect(getTab('tab2').attr('ui-sref-opts'))
+              .toBe('{"reload":true,"notify":true}');
+        });
   });
 
   describe('inkbar', function() {