Вопрос:

AngularJS UI Router: ui-sref не обновляет URL в адресной строке?

javascript angularjs html5 angular-ui-router

260 просмотра

1 ответ

1 Репутация автора

Я создаю приложение AngularJS и использую UI-Router для навигации по приложению.

Поток веб-приложения заключается в том, что сначала нужно зарегистрироваться или войти в систему, а затем вы попадете в основную сетку с множеством элементов, отображаемых с помощью ng-repeat, а когда вы щелкнете по одному из них, вы попадете на панель мониторинга, которая отображает информацию об элементе, по которому щелкнули, и он также успешно меняет путь на index.html #! / dashboard / (здесь идет имя элемента)

Это HTML-код 5 этой основной сетки:

<div class="container">

    <div class="row" ng-controller="ribtStateServicesController" >

        <div class="col-md-3 ribt_HomeGrid" ng-repeat="estado in estados" >
            <div class="img-ribt_overlay" >
               <a ng-click="doWork(estado.idState)" ui-sref="dashboard({ribtNameState: estado.idState})">
                <img src="{{estado.image}}" class="img-thumbnail">
                <div class="ribt_overlay" ></div>
                </a>
            </div>
        </div>

    </div>

</div>

Однако в той же панели инструментов у меня есть боковое меню, в котором есть те же элементы, которые использовались в основной сетке ранее. Таким образом, я решил, что потребуется использовать ту же логику, чтобы использовать параметры, которые предлагает UI-Router, для изменения URL-адреса и отображаемого содержимого. Но это ничего не делает.

Это код в HTML бокового меню панели инструментов:

<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">


                    <md-card md-ink-ripple="#ffffff">
                        <img ng-src="{{estado.nolabel}}" class="md-card-image ribt_estado_side_img" 
                        ui-sref="dashboard({ribtNameState: estado.idState})"
                        
                        alt="Estado" ng-click="doWork(estado.idState); toggleLeft()">
                        <md-card-title class="nopadding">
                            <md-card-title-text>
                                <p class="ribt_card_estado_nombre">{{estado.nombre}}</p>
                            </md-card-title-text>

                            <md-menu>


                                <md-button class="md-icon-button float-right" aria-label="Share" ng-click="$mdMenu.open()">
                                    <i class="material-icons">more_vert</i>
                                </md-button>

                                <md-menu-content width="4" ng-mouseleave="$mdMenu.close()">
                                    <md-menu-item ng-repeat="item in [1, 2, 3]">
                                        <md-button>
                                            Option {{item}}
                                        </md-button>
                                    </md-menu-item>
                                </md-menu-content>

                            </md-menu>

                        </md-card-title>

                    </md-card>




                </div>

Вот код в моей конфигурации приложения:

ribtApp.config(function ($stateProvider,$mdThemingProvider,$locationProvider) {
    
    $stateProvider
    
    .state('login',  {
        url: '',
        templateUrl: 'ribtComponents/ribtLogin/ribtLogin.html',
        controller: 'ribtLoginController'
    }) 
    
    .state('home', {
        url: '/home',
        templateUrl: 'ribtComponents/ribtHome/ribtHome.html',
        controller: 'ribtStateServicesController'
    })
    
    .state('dashboard', {
        url: '/dashboard/{ribtNameState}',
        templateUrl: 'ribtComponents/ribtDashboard/ribtDashboard.html',
        controller: 'ribtStateServicesController',
        resolve:{
            ribtNameState: ['$stateParams', function($stateParams){
                return $stateParams.ribtNameState;
                console.log($stateParams.ribtNameState)
            }]
        }
    });

Я попробовал консольный журнал, чтобы увидеть, был ли изменен параметр, но он ничего не делает с путем URL. Я перепробовал много кода, который нашел в stackoverflow, но ни один из них не сработал. Я был бы очень благодарен, если бы вы могли помочь мне с этим.

Автор: Enrique Torres Источник Размещён: 08.11.2017 11:54

Ответы (1)


0 плюса

121 Репутация автора

Вам нужно переключить ng-hrefs на ui-srefs, что ui-router использует для настройки ссылок для изменения состояний . Так что-то вроде ...

[...]

должно быть что-то похожее на ...

с оговоркой, что я не знаю, что на самом деле делает doWork, поэтому я не знаю, если это необходимо.

Если вам нужно перейти в контроллере, вы также можете ввести $ state и использовать $ state.go (...) , но в большинстве случаев это ui-srefможет быть обработано в моем опыте.

Автор: Josh Lindenger Размещён: 09.11.2017 06:28
Вопросы из категории :
32x32