앵글 소재 w/ui 라우터의 각 탭마다 컨트롤러 분리

Question

md-tab은 각도 재료를 사용하는 별도 상태이므로 md-tabs을 구현하려고합니다. 내 현재 마크 업은 다음과 같습니다.

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의 현재 버전에서이 작업을 수행 할 수 있습니까?

Answer 1

ui-view 요소의 이름을 지정하면 (예 : <div ui-view="player"></div>) $ 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 
     } 
    } 
    }) 

다음 $ stateProvider의 설정과

<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> 

당신은합니다 (currentTab 인덱스 및 업데이트) 각 ui-view 요소를 대상 수 : template.html에 다음과 같은 마크 업 주어진 그래서

,

이제해야 할 일은 입니다. playerController 및 mapController입니다. ui-view에 부분 템플릿 등을로드 할 수 있습니다 (Multiple Named Views 섹션 참조).

Answer 2

구글에서 오는 사람들을위한

및 UI 라우터를 사용하지 않는, 기본 NG-라우터와 같은 일을 수행 할 수 있습니다 를 색인 파일 대신에 탭 코드 :

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

Answer 3

여기에 원본 문서 (https://material.angularjs.org/#/demo/material.components.tabs)로 조금 변경되었습니다.

몇 가지 의견을 추가했습니다.

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

FACTROY : 누군가가 ...

HTML 떠나거나 HES이 같은 탭을 입력려고하고, 페이지를 새로 고치면

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

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

Answer 4

을 내가했다 이 일을 그냥 할 수있어

index.html을

<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> 

navbar.html

<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> 

응용 프로그램.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; 
    }); 

} 

Answer 5

탭에 직접 연결 수 있으며, 순방향 및 유지 문제가 다시 삽입 한 다음, this answer에서 HTML 구조를 사용하는 대안 $transitions 수신기를 사용하려면

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/