Угловая маршрутизация JS с параметром и без - PullRequest
Новая
       8

Угловая маршрутизация JS с параметром и без

0 голосов
/ 08 мая 2018

Я новичок в AngularJS. Теперь у меня на боковой панели две страницы. 

<div class="menu-list">
        <ul id="menu-content" class="menu-content collapse out">
            <li><a ui-sref="dashboard"> <i class="glyphicon glyphicon-home"></i> Dashboard </a></li>
            <li data-toggle="collapse" data-target="#new" class="collapsed">
                <a ui-sref="status-count"><i class="glyphicon glyphicon-list-alt"></i> Record Count by Branch</a>
            </li>
        </ul>
    </div>

Затем я попытался связать страницу от dashboard до status-count с помощью 

<tr ng-repeat="x in branches">
            <td class="text-center">{{ x.BRANCHCODE +" - "+ x.BRANCHNAME}}</td>
            <td><div class="center-block {{x.AMQ ? 'online-ico': 'offline-ico'}}"> </div></td>
            <td><div class="center-block {{x.SQL ? 'online-ico': 'offline-ico'}}"> </div></td>
            <td><a href="/#/status-count/{{selectedState}}/TSL/{{x.BRANCHCODE}}/"><div class="center-block {{x.SL ? 'online-ico': 'offline-ico'}}"> </div></a></td>
            <td><a href="/#/status-count/{{selectedState}}/REF/{{x.BRANCHCODE}}"><div class="center-block {{x.REF ? 'online-ico': 'offline-ico'}}"></div></a></td>
        </tr>

App.js 

var app = angular.module('jimApp', ['ui.router','ngRoute', 'ngCookies' ]);

app.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/dashboard');
        $stateProvider.state('dashboard', {
            url : '/dashboard',
            templateUrl : 'views/dashboard.html',
            controller : 'DashboardController'
        }).state('status-count', {
            url : '/status-count/:param1/:param2/:param3',
            templateUrl : 'views/status-count.html',
            controller : 'RecordCountController'
        });
    });

Связь работает нормально. Однако одна новая проблема теперь заключается в том, что URL боковой панели теперь настроен на последний URL, который я нажал, например 

<a ui-sref="status-count" href="#/status-count/02/REF/1002161"><i class="glyphicon glyphicon-list-alt"></i> Record Count by Branch</a>

Желаемый результат: боковая панель href должна быть только #/status-count без параметров.

1 Ответ

0 голосов
/ 08 мая 2018

Вы можете пропустить добавление параметров в URL (что сделает его видимым в URL) и использовать клавишу params для их определения: 

.state('status-count', {
  url : '/status-count',
  templateUrl : 'views/status-count.html',
  controller : 'RecordCountController',
  params: {
    param1: null,
    param2: null,
    param3: null
  }
})

Существует только одно предупреждение. Вы должны использовать ui-sref вместо href в тегах a. Но это можно легко сделать так: 

<a ui-sref="status-count({param1: selectedState, param2: 'TSL', param3: x.BRANCHCODE})"> ... </a>

Таким образом, переданные параметры не будут видны в URL, но могут быть получены с помощью $stateParams или $transition$.params().

...