Как упоминалось выше, я рекомендую проверить сообщение в блоге, которое я сделал ранее по этой теме.
https://long2know.com/2016/01/angular-tabbed-navigation/ а>
Я подробно описываю управление состоянием, перехват состояния, предотвращение навигации (условно) и т. д. Это управляется службами и обещаниями, которые делают создание рабочего процесса навигации простым и надежным.
Если вы предпочитаете не переходить по ссылке на мой блог, вот плункер:
https://embed.plnkr.co/w5xdJP?autoCloseSidebar&show=preview
А вот и базовый конфиг:
myApp.config(['$uibModalProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider',
function ($uibModalProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
$uibModalProvider.options = { animation: true, backdrop: 'static', keyboard: false };
$locationProvider.html5Mode(false);
$urlRouterProvider
.when('/', '/state1')
.otherwise("/state1");
$stateProvider
.state('tabs', {
abstract: true,
url: '/',
views: {
'tabs': {
controller: 'tabsCtrl as tc',
templateUrl: 'tabs.html',
}
}
})
.state('tabs.state1', {
url: 'state1',
templateUrl: 'state1.html',
controller: function () { },
reloadOnSearch: false
})
.state('tabs.state2', {
url: 'state2',
templateUrl: 'state2.html',
controller: function () { },
reloadOnSearch: false
})
.state('tabs.state3', {
url: 'state3',
templateUrl: 'state3.html',
controller: function () { },
reloadOnSearch: false
})
.state('tabs.state4', {
url: 'state4',
templateUrl: 'state4.html',
controller: function () { },
reloadOnSearch: false
})
}]);
myApp.run(['$log', 'navigationService', function ($log, navigationService) {
// Note, we need a reference to the navigationService so $state events are tracked.
$log.log("Start.");
}]);
Однако я обычно создаю сервис, содержащий список состояний, которые я буду привязывать к вкладкам:
var appStates = function ($state) {
var
states = [
{ name: 'state1', heading: "Tab 1", route: "tabs.state1", active: false, isVisible: true, href: $state.href("tabs.state1") },
{ name: 'state2', heading: "Tab 2", route: "tabs.state2", active: false, isVisible: true, href: $state.href("tabs.state2") },
{ name: 'state3', heading: "Tab 3", route: "tabs.state3", active: false, isVisible: true, href: $state.href("tabs.state3") },
{ name: 'state4', heading: "Tab 4", route: "tabs.state4", active: false, isVisible: true, href: $state.href("tabs.state4") }
];
return {
states: states
};
};
appStates.$inject = ['$state'];
angular.module('long2know.services')
.factory('appStates', appStates);
HTML-код выглядит следующим образом:
<script type="text/ng-template" id="tabs.html">
<div class="row">
<uib-tabset>
<uib-tab ng-repeat="tab in tc.appStates" heading="{{tab.heading}}" active="tab.active" disable="tab.disabled"
select="tc.tabSelected(tab.route)">
</uib-tab>
</uib-tabset>
</div>
<div id="tabs-views" data-ui-view></div>
</script>
ВкладкаКонтроллер:
var tabsCtrl = function ($state, $location, $filter, appStates, navigationService) {
var
vm = this,
initialize = function () {
vm.appStates = appStates.states;
};
vm.tabSelected = function (route) {
$state.go(route);
};
initialize();
};
tabsCtrl.$inject = ['$state', '$location', '$filter', 'appStates', 'navigationService'];
angular
.module('long2know.controllers')
.controller('tabsCtrl', tabsCtrl);
25.09.2016