Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit af041da

Browse files
bradrichjelbourn
bradrich
authored and
jelbourn
committed
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
1 parent 25b7680 commit af041da

File tree

3 files changed

+77
-26
lines changed

3 files changed

+77
-26
lines changed

‎src/components/navBar/demoBasicUsage/index.html

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
<div ng-controller="AppCtrl" ng-cloak>
22
<md-content class="md-padding">
3-
<md-nav-bar md-selected-nav-item="currentNavItem"
4-
md-no-ink-bar="disableInkBar"
5-
nav-bar-aria-label="navigation links">
6-
7-
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
8-
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
9-
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
10-
<!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
11-
<md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
12-
<md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
3+
<md-nav-bar
4+
md-selected-nav-item="currentNavItem"
5+
nav-bar-aria-label="navigation links">
6+
<md-nav-item md-nav-click="goto('page1')" name="page1">
7+
Page One
8+
</md-nav-item>
9+
<md-nav-item md-nav-click="goto('page2')" name="page2">
10+
Page Two
11+
</md-nav-item>
12+
<md-nav-item md-nav-click="goto('page3')" name="page3">
13+
Page Three
14+
</md-nav-item>
15+
<!-- these require actual routing with ui-router or ng-route, so they
16+
won't work in the demo
17+
<md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
18+
<md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
19+
You can also add options for the <code>ui-sref-opts</code> attribute.
20+
<md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
21+
Page Six
22+
</md-nav-item>
1323
-->
1424
</md-nav-bar>
1525
<div class="ext-content">

‎src/components/navBar/navBar.js

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,24 @@ angular.module('material.components.navBar', ['material.core'])
3535
* https://www.w3.org/TR/wai-aria-practices/#Site_Navigator_Tabbed_Style
3636
*
3737
* @param {string=} mdSelectedNavItem The name of the current tab; this must
38-
* match the name attribute of `<md-nav-item>`
38+
* match the name attribute of `<md-nav-item>`
3939
* @param {boolean=} mdNoInkBar If set to true, the ink bar will be hidden.
4040
* @param {string=} navBarAriaLabel An aria-label for the nav-bar
4141
*
4242
* @usage
4343
* <hljs lang="html">
4444
* <md-nav-bar md-selected-nav-item="currentNavItem">
45-
* <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
46-
* <md-nav-item md-nav-sref="app.page2" name="page2">Page Two</md-nav-item>
47-
* <md-nav-item md-nav-href="#page3" name="page3">Page Three</md-nav-item>
45+
* <md-nav-item md-nav-click="goto('page1')" name="page1">
46+
* Page One
47+
* </md-nav-item>
48+
* <md-nav-item md-nav-href="#page2" name="page3">Page Two</md-nav-item>
49+
* <md-nav-item md-nav-sref="page3" name="page2">Page Three</md-nav-item>
50+
* <md-nav-item
51+
* md-nav-sref="app.page4"
52+
* sref-opts="{reload: true, notify: true}"
53+
* name="page4">
54+
* Page Four
55+
* </md-nav-item>
4856
* </md-nav-bar>
4957
*</hljs>
5058
* <hljs lang="js">
@@ -72,17 +80,20 @@ angular.module('material.components.navBar', ['material.core'])
7280
* `<md-nav-item>` describes a page navigation link within the `<md-nav-bar>`
7381
* component. It renders an md-button as the actual link.
7482
*
75-
* Exactly one of the mdNavClick, mdNavHref, mdNavSref attributes are required to be
76-
* specified.
83+
* Exactly one of the mdNavClick, mdNavHref, mdNavSref attributes are required
84+
* to be specified.
7785
*
7886
* @param {Function=} mdNavClick Function which will be called when the
79-
* link is clicked to change the page. Renders as an `ng-click`.
87+
* link is clicked to change the page. Renders as an `ng-click`.
8088
* @param {string=} mdNavHref url to transition to when this link is clicked.
81-
* Renders as an `ng-href`.
89+
* Renders as an `ng-href`.
8290
* @param {string=} mdNavSref Ui-router state to transition to when this link is
83-
* clicked. Renders as a `ui-sref`.
91+
* clicked. Renders as a `ui-sref`.
92+
* @param {!Object=} srefOpts Ui-router options that are passed to the
93+
* `$state.go()` function. See the [Ui-router documentation for details]
94+
* (https://ui-router.github.io/docs/latest/interfaces/transition.transitionoptions.html).
8495
* @param {string=} name The name of this link. Used by the nav bar to know
85-
* which link is currently selected.
96+
* which link is currently selected.
8697
*
8798
* @usage
8899
* See `<md-nav-bar>` for usage.
@@ -394,7 +405,9 @@ function MdNavItem($$rAF) {
394405
var hasNavClick = tAttrs.mdNavClick;
395406
var hasNavHref = tAttrs.mdNavHref;
396407
var hasNavSref = tAttrs.mdNavSref;
408+
var hasSrefOpts = tAttrs.srefOpts;
397409
var navigationAttribute;
410+
var navigationOptions;
398411
var buttonTemplate;
399412

400413
// Cannot specify more than one nav attribute
@@ -412,42 +425,49 @@ function MdNavItem($$rAF) {
412425
} else if (hasNavSref) {
413426
navigationAttribute = 'ui-sref="{{ctrl.mdNavSref}}"';
414427
}
428+
429+
navigationOptions = hasSrefOpts ? 'ui-sref-opts="{{ctrl.srefOpts}}" ' : '';
415430

416431
if (navigationAttribute) {
417432
buttonTemplate = '' +
418433
'<md-button class="_md-nav-button md-accent" ' +
419434
'ng-class="ctrl.getNgClassMap()" ' +
420435
'tabindex="-1" ' +
436+
navigationOptions +
421437
navigationAttribute + '>' +
422438
'<span ng-transclude class="_md-nav-button-text"></span>' +
423439
'</md-button>';
424440
}
425441

426442
return '' +
427-
'<li class="md-nav-item" role="option" aria-selected="{{ctrl.isSelected()}}">' +
443+
'<li class="md-nav-item" ' +
444+
'role="option" ' +
445+
'aria-selected="{{ctrl.isSelected()}}">' +
428446
(buttonTemplate || '') +
429447
'</li>';
430448
},
431449
scope: {
432450
'mdNavClick': '&?',
433451
'mdNavHref': '@?',
434452
'mdNavSref': '@?',
453+
'srefOpts': '=?',
435454
'name': '@',
436455
},
437456
link: function(scope, element, attrs, controllers) {
438457
var mdNavItem = controllers[0];
439458
var mdNavBar = controllers[1];
440459

441460
// When accessing the element's contents synchronously, they
442-
// may not be defined yet because of transclusion. There is a higher chance
443-
// that it will be accessible if we wait one frame.
461+
// may not be defined yet because of transclusion. There is a higher
462+
// chance that it will be accessible if we wait one frame.
444463
$$rAF(function() {
445464
if (!mdNavItem.name) {
446-
mdNavItem.name = angular.element(element[0].querySelector('._md-nav-button-text'))
447-
.text().trim();
465+
mdNavItem.name = angular.element(element[0]
466+
.querySelector('._md-nav-button-text')).text().trim();
448467
}
449468

450-
var navButton = angular.element(element[0].querySelector('._md-nav-button'));
469+
var navButton = angular.element(element[0]
470+
.querySelector('._md-nav-button'));
451471
navButton.on('click', function() {
452472
mdNavBar.mdSelectedNavItem = mdNavItem.name;
453473
scope.$apply();
@@ -477,6 +497,10 @@ function MdNavItemController($element) {
477497
/** @const {?string} */
478498
this.mdNavHref;
479499

500+
/** @const {?string} */
501+
this.mdNavSref;
502+
/** @const {?Object} */
503+
this.srefOpts;
480504
/** @const {?string} */
481505
this.name;
482506

‎src/components/navBar/navBar.spec.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,23 @@ describe('mdNavBar', function() {
158158

159159
expect($scope.selectedTabRoute).toBe('tab2');
160160
});
161+
162+
it('adds ui-sref-opts attribute to nav item when sref-opts attribute is ' +
163+
'defined', function() {
164+
create(
165+
'<md-nav-bar md-selected-nav-item="selected" nav-bar-aria-label="nav">' +
166+
'<md-nav-item md-nav-sref="page1">' +
167+
'tab1' +
168+
'</md-nav-item>' +
169+
'<md-nav-item md-nav-sref="page2" sref-opts="{reload:true,notify:true}">' +
170+
'tab2' +
171+
'</md-nav-item>' +
172+
'</md-nav-bar>'
173+
);
174+
175+
expect(getTab('tab2').attr('ui-sref-opts'))
176+
.toBe('{"reload":true,"notify":true}');
177+
});
161178
});
162179

163180
describe('inkbar', function() {

0 commit comments

Comments
 (0)