Nano Hash - криптовалюты, майнинг, программирование

как изменить маршрут для каждой вкладки в uib-tabset

Когда я выбираю вкладку, я хочу, чтобы URL-адрес изменился. я должен создать состояние для каждой вкладки?

Это мой код, который отлично работает без изменения состояния.

Мой app.js

var myApp=angular.module('app', ['ui.router','ngAnimate', 'ui.bootstrap']);

myApp.config([
            '$stateProvider',
            '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {

                $stateProvider.state('/', {
                    url: "",
                    views: {
                      "ratios": { templateUrl: "views/requetes.html" },
                      "reqBase": {templateUrl: "views/common.html" },
                      "SQLconsole": {templateUrl: "views/console.html" },
                    }

                  });
                $urlRouterProvider.otherwise('/');
            }]);



myApp.controller('TabsCtrl', function ($rootScope, $state, $scope, $window) {

     $scope.tabs = [
                    { title: "ratios", route: "ratios", active: true },
                    { title: "requetes de Base", route: "reqBase", active: false },
                    { title: "Console", route: "SQLconsole", active: false },
                ];

});

Определение набора вкладок:

<div data-ng-controller="TabsCtrl">    

     <uib-tabset>
                <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                    <div ui-view="{{tab.route}}"></div>
                </uib-tab>
            </uib-tabset>

    </div>

  • Будет одно корневое состояние, в котором вы будете показывать вкладки внутри содержимого вкладки, у вас будет другое представление пользовательского интерфейса, которое будет загружать содержимое вкладки на основе состояния, в основном каждая вкладка будет иметь свое собственное состояние. wgich будет дочерним элементом корневого состояния. 23.01.2016
  • Данные ответы не используют uib-tabset! Вы говорите, что решили проблему, но не даете своего решения. Я думаю, что попробую long2know.com/2016/01/angular-tabbed -навигация вместо этого. 16.09.2016

Ответы:


1

Попробуйте этот код:

var myApp=angular.module('app', ['ui.router','ngAnimate', 'ui.bootstrap']);
     myApp.config([
          '$stateProvider',
          '$urlRouterProvider',
          function ($stateProvider, $urlRouterProvider) {
               $stateProvider
                    .state('home', {
                         url:"/",
                         templateUrl: "views/requetes.html",
                    })
                    .state('home.ratios', {
                         url:"/ratios",
                         templateUrl: "views/requetes.html",
                    })
                    .state('home.reqBase', {
                         url:"/reqBase",
                         templateUrl: "views/common.html",
                    })
                    .state('home.SQLconsole', {
                         url:"/SQLconsole",
                         templateUrl: "views/console.html"
                    })
                    $urlRouterProvider.otherwise('/');
          }]);

Вот рабочий PLUNKR для этого кода !!

22.01.2016
  • Огромное спасибо . Я использовал ваше решение с некоторыми изменениями, и оно работает :) 24.01.2016
  • Там нет uib-табов... :-( 16.09.2016

  • 2

    Как упоминалось выше, я рекомендую проверить сообщение в блоге, которое я сделал ранее по этой теме.

    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

    3

    Да, вы должны использовать вложенные состояния для своих вкладок. Что-то вроде ниже:

    $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'main.html'
      })
      .state('main.ratios', {
        url: '/ratios',
        templateUrl: 'views/requetes.html'
      })
    

    Вот аналогичная реализация с панелью навигации, которую вы можете использовать в качестве примера.

    22.01.2016
    Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..