AngularJS UI 路由器：ui-sref 不更新地址栏中的 URL？

Question

我正在构建一个 AngularJS 应用程序，并且我正在使用 UI-Router 来浏览该应用程序。

Web 应用程序的流程包括首先注册或登录，然后将您带到一个主网格，该网格有许多通过 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 中找到的代码，但没有一个有效。如果您能帮我解决这个问题，我将不胜感激。

Answer 1

您需要将ng-hrefs 切换为ui-srefs，这是ui-router 使用的to set up links to change states。所以像......

[...]

应该更像...

[...]

需要注意的是，我不知道 doWork 实际上在做什么，所以我不知道这是否有必要。

如果您需要在控制器中进行转换，您也可以注入 $state 并使用 $state.go(...)，但大多数时候 ui-srefs 可以根据我的经验处理它。

【讨论】：

• 您好@Josh，首先感谢您查看我的问题。我尝试将 ng-href 更改为 ui-sref，但 url 没有任何变化。函数 doWork 做了以下事情，但我不知道它是否与我的问题有关： $scope.doWork = function (p) { $scope.idState = p; $scope.getIDs(); }
• $scope.getIDs = function () { $http({ url: "189.164.191.218:4000/ChartService/ChartService", method: "POST", data: $.param({ id: $scope.idState }) , 标头： { 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' } }) }