Question

我是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而没有参数。

Answer 1

您可以跳过将params添加到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>

这样，传递的参数将无法在网址中看到，但可以使用$stateParams或$transition$.params()获取。

使用和不使用param的Angular JS路由

1 个答案: