angularjs - Ui-router के साथ कोणीय सामग्री एमडी-टैब आरंभिक टैब लोड नहीं करता है




angular-ui-router angular-material (2)

उदाहरण

मेरे पास एक ऐसा एप्लिकेशन है जो दोनों, 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>

Jsbin पर मेरा उदाहरण देखें


अधिक नियंत्रण के लिए, पैरेंट स्टेट पर एक 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');

})


जे एस बेला के नीचे की जांच करें, यह आपकी समस्या को हल कर सकता है "https://jsfiddle.net/v8kk5fqq"





angular-material