Question

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

Web应用程序的流程包括首次注册或登录，然后它将您带到一个主网格，其中包含许多通过ng-repeat显示的元素，当您单击其中一个元素时，它会将您带到一个仪表板，显示已单击的元素的信息，它还成功更改了index.html＃！/ dashboard /的路径（此处为元素的名称）

这是该主网格的html 5代码：

＆＃13;

<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>

＆＃13;

但是，在同一个仪表板中，我有一个侧面菜单，它具有之前在主网格中使用的相同元素。所以我认为能够使用UI-Router提供的参数来更改URL和显示的内容需要相同的逻辑。但它没有任何作用。

这是仪表板侧边菜单HTML中的代码：

＆＃13;

<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>

＆＃13;

Heres是我的应用配置中的代码：

＆＃13;

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)
            }]
        }
    });

＆＃13;

我尝试了一个控制台日志来查看该参数是否被更改，但它对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})">

有一点需要注意，我不知道工作实际上在做什么，所以我不知道是否有必要。

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

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

1 个答案: