带有 ui-router 的 Angular Material md-tabs 不会加载初始选项卡答案

【问题标题】：Angular Material md-tabs with ui-router does not load initial tab带有 ui-router 的 Angular Material md-tabs 不会加载初始选项卡
【发布时间】：2016-03-20 23:45:25
【问题描述】：

用例

我有一个应用程序同时使用 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>

See my example at jsbin.

【问题讨论】：

你的 jsbin 里面好像没有任何代码..
@Gustav 我更新了链接，抱歉。

标签： angularjs angular-ui-router angular-material

【解决方案1】：

要获得更多控制，请在父状态上使用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');

})

【讨论】：

【解决方案2】：

检查下面的 js fiddle 可能会解决您的问题 "https://jsfiddle.net/v8kk5fqq"

【讨论】：

【解决方案3】：

如果您将 jsbin 输出打开到另一个窗口，以便您可以查看 url，您将看到重定向到 /foo 不起作用。

您必须先配置urlRouterProvider，然后再配置stateProvider。
另外，来自 ui-router wiki:

当使用 url 路由和嵌套状态时，默认行为是让子状态将其 url 附加到每个状态的 url 其父州。

所以/tabs/foo 必须变成/foo，与/tabs/bar 相同。

（如果你想要绝对网址，你可以使用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

【讨论】：