javascript - AngularJS UI 路由器 : ui-sref not updating URL in address bar?

Question

我正在构建一个 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 中找到的代码，但没有一个起作用。如果您能帮助我，我将非常感激。

Answer 1

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

<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">
[...]
   <a ng-click="doWork(estado.idState)" ng-href="index.html#!/dashboard/{{estado.idState}}">

应该更像是......

<div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda">
[...]
   <a ng-click="doWork(estado.idState)" ui-sref="dashboard({ribtNameState: estado.idOrWhatever})">

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

如果需要在 Controller 中转换，也可以注入(inject) $state并使用$state.go(...) ，但根据我的经验，大多数时候 ui-sref 都可以处理它。