Question

用例

我有一个同时使用angular-material（v1.0.0）和ui-router（v0.2.15）的应用程序，并试图让父状态具有显示在{{1 }} / md-tabs。

问题

我开始工作，但没有加载初始标签。只有在单击选项卡后，才会加载其状态。

代码

＆＃13;

md-tab

＆＃13;

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');
  })

;

＆＃13;

See my example at jsbin

Answer 1

如果您将jsbin输出打开到另一个窗口，以便您可以观看该网址，您会看到重定向到/foo无法正常工作。

您必须首先配置urlRouterProvider，然后配置stateProvider。
此外，来自ui-router wiki：

将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

Answer 2

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

}）

Answer 3

检查以下js小提琴可能会解决您的问题 “https://jsfiddle.net/v8kk5fqq”

使用ui-router的Angular Material md-tabs不会加载初始选项卡

用例

问题

代码

3 个答案: