ui-router가 있는 각 재질의 탭당 별도의 컨트롤러

ui-router가 있는 각 재질의 탭당 별도의 컨트롤러

저는 제 시스템을 구현하려고 합니다.md-tabs그래서 각각md-tab는 각진 물질을 사용하는 별개의 상태입니다.현재 마크업은 다음과 같습니다.

  md-tabs.is-flex.auto-flex(selected="selectedIndex",layout="vertical")
     md-tab(on-select="selectTab(0)",label="Player",ui-sref="state1")
        div.tab(ui-view)

     md-tab(on-select="selectTab(1)",label="Map",ui-sref="state2")
        div.tab(ui-view)

하지만 저는 이것이 ui-router에 유효한 마크업이라고 생각하지 않습니다.현재 버전의 각도-물질과 ui-router로 가능합니까?

ui-view 요소의 이름을 지정하는 경우(예:<div ui-view="player"></div>그런 다음 $stateProvider 구성에서 대상을 지정할 수 있습니다.

따라서 template.html에서 다음과 같은 마크업이 주어집니다.

<md-tabs md-selected="currentTab">
    <md-tab label="Player" ui-sref="tabs.player">
        <div ui-view="player"></div>
    </md-tab>
    <md-tab label="Map" ui-sref="tabs.map">
        <div ui-view="map"></div>
    </md-tab>
</md-tabs>

당신은 각각을 목표로 삼을 수 있습니다.ui-view요소(및 현재 Tab 인덱스 업데이트)를 다음 $stateProvider 구성으로 수행합니다.

.state('tabs', {
    abstract: true,
    url: '/tabs',
    templateUrl: 'template.html',
    controller: function($scope) {
      $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        $scope.currentTab = toState.data.selectedTab;
      });
    }
  })
.state('tabs.player', {
    url: '/player',
    data: {
      'selectedTab': 0
    },
    views: {
      'player': {
        controller: playerController
      }
    }
  })
.state('tabs.map', {
    url: '/map',
    data: {
      'selectedTab': 1
    },
    views: {
      'map': {
        controller: mapController
      }
    }
  })

이제 플레이어 컨트롤러와 맵 컨트롤러를 정의하기만 하면 됩니다.부분 템플릿 등을 여전히 로드할 수 있습니다.ui-view, Multiple Named Views의 섹션을 참조합니다.

저는 이 일을 그냥 할 수 있었습니다.

색인을 보다

<md-toolbar ng-controller="NavigationController as vm"
            ng-include="'app/components/navbar/navbar.html'"
            class="md-default-theme" >
</md-toolbar>

<md-content ui-view
            md-scroll-y
            class="md-default-theme"
            role="main"
            flex>
</md-content>

나비 모양의

<md-tabs md-selected="vm.currentTab" md-stretch-tabs="always" class="main-toolbar">
    <md-tab label="Home" ui-sref="home"></md-tab>
    <md-tab label="Portfolio" ui-sref="portfolio"></md-tab>
    <md-tab label="Contact" ui-sref="contact"></md-tab>
</md-tabs>

app.js

$stateProvider
    .state('home', {
        url: '/',
        data: {
            'selectedTab' : 0
        },
        templateUrl: 'app/components/main/main.html',
        controller: 'MainController as vm'
    })
    .state('portfolio', {
        url: '/portfolio',
        data: {
            'selectedTab' : 1
        },
        templateUrl: 'app/components/portfolio/portfolio.html',
        controller: 'PortfolioController as vm'
    })
    .state('contact', {
        url: '/contact',
        data: {
            'selectedTab' : 2
        },
        templateUrl: 'app/components/contact/contact.html',
        controller: 'ContactController as vm'
    });

navigation.controller.js

function NavigationController($scope) {

    var vm = this;

    $scope.$on('$stateChangeSuccess', function(event, toState) {
        vm.currentTab = toState.data.selectedTab;
    });

}

ui-router를 사용하지 않고 Google에서 오는 모든 사용자의 경우 기본 ng-router로 동일한 작업을 수행할 수 있습니다.인덱스 파일에 탭 코드를 넣습니다.

<md-tabs md-selected="0" ng-controller="TabCtrl">
    <md-tab ng-repeat="tab in tabs" md-on-select="switchTab($index)" label="{{tab}}">
        <div ng-view></div>
     </md-tab>
</md-tabs>

그런 다음 TabCtrl을 만듭니다.

// Define the titles of your tabs
$scope.tabs = ["Player", "Map"];

// Change the tab
$scope.switchTab = function(index) {
    switch(index) {
        case 0: $location.path('/player');break;
        case 1: $location.path('/map');break;
    }
}

마지막으로 구성에서 경로를 정의합니다.

.when( '/player', {
    templateUrl: 'partials/player.html',
    controller: 'PlayerCtrl'
})
.when( '/map', {
    templateUrl: 'partials/map.html',
    controller: 'MapCtrl'
});

여기서 원본 문서(https://material.angularjs.org/ #/ demo/ material. components. tabsents. tabs):

댓글 달았습니다.만약 누군가 당신의 페이지를 떠나거나 새로고침한다면, 그는 같은 탭으로 들어갈겁니다...

HTML:

  <md-tabs md-selected="selectedIndex">

<md-tab ng-repeat="tab in tabs" md-on-select="announceSelected(tab, $index)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled" label="{{tab.title}}">

   </md-tab>
 </md-tabs>

컨트롤러:

var tabs = [
             { title: 'welcome'},
             { title: 'profile'},
            ];



     $scope.selectedIndex = 0;
    // $scope.selectedIndex = parseInt($cookies.selectedIndex);
     $scope.tabs = tabs;



$scope.announceSelected = function(tab, index) {

 //$cookies["selectedIndex"] = index;
       RedirectService.To(tab.title);
}

팩토이:

app.factory('RedirectService', function ($location){
        return{
                    To : function(key){

                        return $location.path(key)
                    },
            };
});

탭에 직접 링크를 걸 수 있고, 앞 뒤의 동작을 유지하는 대안은 이 답변의 HTML 구조를 사용한 후 injection하는 것입니다.$transitions사용하다onSuccess청취자:

angular.module('tabs', ['ngMaterial', 'ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
  ($stateProvider, $urlRouterProvider) => {
    $stateProvider
    .state('home', {
      url: '/',
      data: { selectedTab: 0 },
      template: '<p>HOME</p>',
    })
    .state('portfolio', {
      url: '/portfolio',
      data: { selectedTab: 1 },
      template: "<p>'FOLIO</p>",
    })
    .state('contact', {
      url: '/contact',
      data: { selectedTab: 2 },
      template: "<p>'TACT</p>",
    })
  }
  ])
.controller('NavigationController', function($scope, $transitions) {
  $transitions.onSuccess({},
    function(transition) {
      var $state = transition.router.stateService
      var currentTab = $state.$current.data.selectedTab
      $scope.selectedTab = currentTab
    }
  )
})

작동 예는 다음과 같습니다. https://dysbulic.github.io/angular-tabs/

언급URL : https://stackoverflow.com/questions/27221222/separate-controller-per-tab-in-angular-material-w-ui-router