Angular Material md-tabs with ui-router 不加载初始选项卡
Angular Material md-tabs with ui-router does not load initial tab
用例
我有一个同时使用 angular-material
(v1.0.0) 和 ui-router
(v0.2.15) 的应用程序,并尝试让父状态具有显示在 md-tabs
/md-tab
.
问题
我可以使用它,但没有加载初始选项卡。只有单击选项卡后,才会加载它们的状态。
代码
angular.module('demoApp', ['ui.router', 'ngMaterial'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('tabs', {
url: '/tabs',
template: '<div>' +
' <h1>Tabs View</h1>' +
' <md-tabs>' +
' <md-tab label="Foo" ui-sref="tabs.foo">' +
' </md-tab>' +
' <md-tab label="Bar" ui-sref="tabs.bar">' +
' </md-tab>' +
' </md-tabs>' +
' <md-content ui-view></md-content>' +
'</div>'
});
$stateProvider.state('tabs.foo', {
url: '/tabs/foo',
template: 'Hello from Foo'
});
$stateProvider.state('tabs.bar', {
url: '/tabs/bar',
template: 'Hello from Bar'
});
$urlRouterProvider.when('/tabs', '/tabs/foo');
$urlRouterProvider.otherwise('/tabs');
})
;
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v1.0.0/angular-material.css">
<script src="//rawgit.com/angular/bower-angular/master/angular.js"></script>
<script src="//rawgit.com/angular/bower-angular-aria/master/angular-aria.js"></script>
<script src="//rawgit.com/angular/bower-angular-animate/master/angular-animate.js"></script>
<script src="//rawgit.com/angular/bower-material/v1.0.0/angular-material.js"></script>
<script src="//rawgit.com/angular-ui/ui-router/master/release/angular-ui-router.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div ui-view></div>
</body>
</html>
要获得更多控制,请在父状态上使用 controller
函数并在 angular.value()
中设置默认选项卡
angular.module('demoApp', ['ui.router', 'ngMaterial'])
.value('home_tab', 'tabs.foo')
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('tabs', {
url: '/tabs',
template: '<div>' +
' <h1>Tabs View</h1>' +
' <md-tabs>' +
' <md-tab label="Foo" ui-sref="tabs.foo">' +
' </md-tab>' +
' <md-tab label="Bar" ui-sref="tabs.bar">' +
' </md-tab>' +
' </md-tabs>' +
' <md-content ui-view></md-content>' +
'</div>',
controller: ['$state','home_tab', function($state, home_tab){$state.go(home_tab);}]
});
$stateProvider.state('tabs.foo', {
url: '/tabs/foo',
template: 'Hello from Foo'
});
$stateProvider.state('tabs.bar', {
url: '/tabs/bar',
template: 'Hello from Bar'
});
$urlRouterProvider.otherwise('/tabs');
})
检查下面的 js fiddle 可能会解决您的问题
"https://jsfiddle.net/v8kk5fqq"
如果您打开 jsbin 输出到另一个 window,以便您可以观看 url,您将看到重定向到 /foo
不起作用。
您必须先配置 urlRouterProvider
,然后再配置 stateProvider
。
此外,来自 ui-路由器 wiki:
When using url routing together with nested states the default
behavior is for child states to append their url to the urls of each
of its parent states.
所以/tabs/foo
必须变成/foo
,和/tabs/bar
一样。
(如果你想要绝对 urls 你可以使用 url: '^/foo',
)
因此您的代码变为:
angular.module('demoApp', ['ui.router', 'ngMaterial'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/tabs', '/tabs/foo');
$urlRouterProvider.otherwise('/tabs');
$stateProvider.state('tabs', {
url: '/tabs',
template: '<div>' +
' <h1>Tabs View</h1>' +
' <md-tabs>' +
' <md-tab label="Foo" ui-sref="tabs.foo">' +
' </md-tab>' +
' <md-tab label="Bar" ui-sref="tabs.bar">' +
' </md-tab>' +
' </md-tabs>' +
' <md-content ui-view></md-content>' +
'</div>'
});
$stateProvider.state('tabs.foo', {
url: '/foo',
template: 'Hello from Foo'
});
$stateProvider.state('tabs.bar', {
url: '/bar',
template: 'Hello from Bar'
});
});
工作jsbin
用例
我有一个同时使用 angular-material
(v1.0.0) 和 ui-router
(v0.2.15) 的应用程序,并尝试让父状态具有显示在 md-tabs
/md-tab
.
问题
我可以使用它,但没有加载初始选项卡。只有单击选项卡后,才会加载它们的状态。
代码
angular.module('demoApp', ['ui.router', 'ngMaterial'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('tabs', {
url: '/tabs',
template: '<div>' +
' <h1>Tabs View</h1>' +
' <md-tabs>' +
' <md-tab label="Foo" ui-sref="tabs.foo">' +
' </md-tab>' +
' <md-tab label="Bar" ui-sref="tabs.bar">' +
' </md-tab>' +
' </md-tabs>' +
' <md-content ui-view></md-content>' +
'</div>'
});
$stateProvider.state('tabs.foo', {
url: '/tabs/foo',
template: 'Hello from Foo'
});
$stateProvider.state('tabs.bar', {
url: '/tabs/bar',
template: 'Hello from Bar'
});
$urlRouterProvider.when('/tabs', '/tabs/foo');
$urlRouterProvider.otherwise('/tabs');
})
;
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v1.0.0/angular-material.css">
<script src="//rawgit.com/angular/bower-angular/master/angular.js"></script>
<script src="//rawgit.com/angular/bower-angular-aria/master/angular-aria.js"></script>
<script src="//rawgit.com/angular/bower-angular-animate/master/angular-animate.js"></script>
<script src="//rawgit.com/angular/bower-material/v1.0.0/angular-material.js"></script>
<script src="//rawgit.com/angular-ui/ui-router/master/release/angular-ui-router.js"></script>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div ui-view></div>
</body>
</html>
要获得更多控制,请在父状态上使用 controller
函数并在 angular.value()
angular.module('demoApp', ['ui.router', 'ngMaterial'])
.value('home_tab', 'tabs.foo')
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('tabs', {
url: '/tabs',
template: '<div>' +
' <h1>Tabs View</h1>' +
' <md-tabs>' +
' <md-tab label="Foo" ui-sref="tabs.foo">' +
' </md-tab>' +
' <md-tab label="Bar" ui-sref="tabs.bar">' +
' </md-tab>' +
' </md-tabs>' +
' <md-content ui-view></md-content>' +
'</div>',
controller: ['$state','home_tab', function($state, home_tab){$state.go(home_tab);}]
});
$stateProvider.state('tabs.foo', {
url: '/tabs/foo',
template: 'Hello from Foo'
});
$stateProvider.state('tabs.bar', {
url: '/tabs/bar',
template: 'Hello from Bar'
});
$urlRouterProvider.otherwise('/tabs');
})
检查下面的 js fiddle 可能会解决您的问题 "https://jsfiddle.net/v8kk5fqq"
如果您打开 jsbin 输出到另一个 window,以便您可以观看 url,您将看到重定向到 /foo
不起作用。
您必须先配置
urlRouterProvider
,然后再配置stateProvider
。此外,来自 ui-路由器 wiki:
When using url routing together with nested states the default behavior is for child states to append their url to the urls of each of its parent states.
所以/tabs/foo
必须变成/foo
,和/tabs/bar
一样。
(如果你想要绝对 urls 你可以使用 url: '^/foo',
)
因此您的代码变为:
angular.module('demoApp', ['ui.router', 'ngMaterial'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/tabs', '/tabs/foo');
$urlRouterProvider.otherwise('/tabs');
$stateProvider.state('tabs', {
url: '/tabs',
template: '<div>' +
' <h1>Tabs View</h1>' +
' <md-tabs>' +
' <md-tab label="Foo" ui-sref="tabs.foo">' +
' </md-tab>' +
' <md-tab label="Bar" ui-sref="tabs.bar">' +
' </md-tab>' +
' </md-tabs>' +
' <md-content ui-view></md-content>' +
'</div>'
});
$stateProvider.state('tabs.foo', {
url: '/foo',
template: 'Hello from Foo'
});
$stateProvider.state('tabs.bar', {
url: '/bar',
template: 'Hello from Bar'
});
});
工作jsbin