UI-Router Маршрутизация возвращается к значениям по умолчанию

Question

UI-Router Маршрутизация возвращается к значениям по умолчанию

0

Я работаю над приложением, которое должно иметь возможность изменять представления по щелчку.

У меня есть таблица значений, которые можно щелкнуть, что приводит к главной странице для этого объекта. У меня проблема с моими маршрутами, потому что независимо от того, как мой маршрут возвращается к умолчанию ('/').

Вот мой главный файл javascript.

angular.module('myApp',['ui.router', 'templates', 'angular-loading-bar'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    // Default route
    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('home', {
            url: '/',
            controller: 'MainCtrl',
            templateUrl: 'home/_home.html',
            resolve: {
                    product: ['products', function(products) {
                        return products.get();
                    }]
            }
        })
        .state('schedules', {
            url:'/schedules',
            controller: 'SchedulesCtrl',
            templateUrl:'schedules/_schedules.html',
            resolve: {
                schedules: ['schedules', function(schedules) {
                    return schedules.get();
                }]
            }
    });

}]);

Я пробовал два разных способа изменить страницу, регулярную ссылку на навигационную панель <li><a href="#/schedules">Click Me</a></li> и добавив функцию ng-click $location.path('/schedules'); на столе. Я могу быстро увидеть изменение ссылки, но он перенаправляется по умолчанию.

Здесь мой основной application.html.erb

<!DOCTYPE html>
<html>

    <head>
      <title>Features</title>
      <%= stylesheet_link_tag    'application', media: 'all' %>
      <%= javascript_include_tag 'application' %>
      <%= csrf_meta_tags %>
    </head>

    <body ng-app="myApp">
        <!-- Navbar -->
        <div ng-include="'nav/_nav.html'"></div>

        <div class="row" >
            <div class="col-md-8 col-md-offset-2">
                    <div ui-view></div>
            </div>
        </div>

    </body>
</html>

HTML для частичной части Navbar

<nav class="navbar navbar-default"role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">My App</a>
            </div>

            <div class="collapse navbar-collapse" id="nav-toggle">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">Main</a></li>
                    <li><a href="#/schedules">Schedule</a></li>
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <label for="date">Label</label>
                    <input type="text" class="form-control" ng-model="datePicker" datepicker id="date"/>
                </form>
            </div>
</nav>

Главная частичная

<div class="panel panel-default ">
                <div class="panel-heading flex">

                        <span class="sg-box inline">
                            <h2>Home
                                <div class="flex inline flex-right pull-right">
                                    <form class="form-inline">
                                        <a ng-attr-class="btn btn-default btn-small {{allFilterOn && 'btn-secondary'}}" ng-click="turnOnAllFilter()">All</a>
                                        <a ng-attr-class="btn btn-default  btn-small {{missingFilterOn && 'btn-secondary'}}" ng-click="turnOnMissingFilter()">Missing</a>
                                        <a ng-attr-class="btn btn-default  btn-small {{readyFilterOn && 'btn-secondary'}}" ng-click="turnOnReadyFilter()">Ready</a>
                                        <input type="text" class=" form-control input-md" placeholder="Filter" ng-model="name">
                                    </form>
                                </div>
                            </h2>
                        </span>

                </div>
                <div class="panel-body">
                    <table class="table table-align-middle table-hover">
                        <thead>
                            <tr>
                                <th class="name">Name&nbsp;<a ng-click="sortFields('name')"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th class="delivery">Delivery</th>
                                <th class="features">Features</th>
                                <th class="warnings">Warnings</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-click="go(p)"ng-repeat="p in filteredProducts  = (product.products | filter: productName | productFilter:allFilterOn:missingFilterOn:readyFilterOn | orderBy:sortType:sortReverse)">
                                <td>{{p.name}}</td>
                                <td>Daily</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="{{p.listing_count}}" aria-valuemin="0" aria-valuemax="{{p.required_features}}" style="min-width: 2em; width: {{(100*p.listing_count/p.required_features)| number:0}}%;">
                                            {{p.listing_count}}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="glyphicon glyphicon-warning-sign"> 0 </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div
            </div>

Функция Go в MainCtrl

$scope.go = function(product)  {

        console.log($location);
        console.log(product.id);
        $location.path('#/schedules');

    }

user3186332 28 нояб. 2015, в 18:54

Источник

0

Можете ли вы создать PLNKR или добавить еще код для проверки, кстати, любая ошибка в консоли?
swapnesh 28 нояб. 2015, в 17:54
0

Нет ошибок в консоли. Я вижу, что ссылка заполняется, а затем она возвращается к значению по умолчанию.
user3186332 28 нояб. 2015, в 17:57
0

что произойдет, если вы перейдете в / расписание? в противном случае вы можете вставить свой код в pastebin или plnkr, чтобы облегчить отладку
swapnesh 28 нояб. 2015, в 18:01
0

Если я перейду непосредственно к / график, то по умолчанию вернусь к /. Я выложу свой код на plunkr.
user3186332 28 нояб. 2015, в 18:05
0

хорошо .. дайте мне знать, когда сделали
swapnesh 28 нояб. 2015, в 18:06
0

лучше использовать ui-sref вместо href
swapnesh 28 нояб. 2015, в 18:20
1

Я включил многословие UI-Router, и это была проблема с разрешением одной из переменных .... Спасибо за помощь @swapnesh!
user3186332 28 нояб. 2015, в 19:15

Показать ещё 5 комментариев

Теги:

html

angularjs

angular-ui-router

1 ответ

Ещё вопросы

Можете ли вы создать PLNKR или добавить еще код для проверки, кстати, любая ошибка в консоли?
Нет ошибок в консоли. Я вижу, что ссылка заполняется, а затем она возвращается к значению по умолчанию.
что произойдет, если вы перейдете в / расписание? в противном случае вы можете вставить свой код в pastebin или plnkr, чтобы облегчить отладку
Если я перейду непосредственно к / график, то по умолчанию вернусь к /. Я выложу свой код на plunkr.
хорошо .. дайте мне знать, когда сделали
лучше использовать ui-sref вместо href
Я включил многословие UI-Router, и это была проблема с разрешением одной из переменных .... Спасибо за помощь @swapnesh!

Namoshek · Answer 1 · 2015-11-29T08-06-00.000Z

При использовании углового пакета ui.router вы всегда должны придерживаться предусмотренных функций изменения состояния.

Таким образом, вы можете использовать тег html, который заменяет href-tag:

<a ui-sref="state.name.here">Link</a>

Или вы идете с функцией, которая может использоваться в контроллере:

function Controller($scope, $state) {
    $scope.goSchedules = function() {
        $state.go('state.name.here');
    }
}

И используйте функцию в теге ng-click для элемента.

При ручном изменении URL-адреса с помощью href-тега или службы определения местоположения у вас будут проблемы не только при изменении URL-адреса состояния, но также при переключении между normal- и HTML5-режимом (нет значка hashtag # в URL-адресе бар). Изменение URL-адреса для состояния может быть проблемой в будущем, когда конфликтуют два имени или вы хотите оптимизировать для SEO. И выключение HTML5-режима иногда полезно во время разработки, но оно просто выглядит лучше в производстве.