【问题标题】:ui-router not changing url in address barui-router 不更改地址栏中的 url
【发布时间】:2014-04-27 16:36:23
【问题描述】:

当我单击电子邮件按钮时,它应该加载电子邮件页面并将 URL 更改为 /emails。 当我点击文本按钮时,它应该加载文本页面并将网址更改为/texts

虽然电子邮件工作正常,但实际上发生了什么,但是当我点击文本按钮时,正确的 ctrl 和视图已加载并正常工作,但我的地址栏保留了我打开的最后一个 url,而不是更改为文本 url。

我的应用程序运行良好,但我不知道是什么原因造成的。

当我手动输入 url 并点击输入正确的视图并按预期加载 ctrl 时,但是当我单击另一个链接然后单击文本链接时,我的地址栏仍然在其中。

URL 错误,应该是/texts

电子邮件模块代码

/emails/emails.js

angular.module('rmc.contact.emails', [
    'rmc.contact.emails.create',
    'rmc.contact.emails.edit',
    'rmc.contact.emails.preview',
    'rmc.contact.emails.view'
])

    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
            .state('rmc.contact.emails', {
                url: '/emails',
                controller: 'EmailsCtrl',
                templateUrl: '/apps/rmc/contact/emails/emails.tpl.html'
            });
    }])

/emails/create/create.js

angular.module('rmc.contact.emails.create', [])

    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
            .state('rmc.contact.emails.create', {
                url: '/create?cardId',
                controller: 'EmailsCreateCtrl',
                templateUrl: '/apps/rmc/contact/emails/create/create.tpl.html'
            });
    }])

文本模块代码

/contact/texts/texts.js

angular.module('rmc.contact.texts', [
    'rmc.contact.texts.create',
    'rmc.contact.texts.edit',
    'rmc.contact.texts.preview',
    'rmc.contact.texts.view'
])

    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
            .state('rmc.contact.texts', {
                url: '/texts',
                controller: 'TextsCtrl',
                templateUrl: '/apps/rmc/contact/texts/texts.tpl.html'
            });
    }])

/contact/texts/create/create.js

angular.module('rmc.contact.texts.create', [])

    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
            .state('rmc.contact.texts.create', {
                url: '/create',
                controller: 'TextsCreateCtrl',
                templateUrl: '/apps/rmc/contact/texts/create/create.tpl.html'
            });
    }])

菜单链接

/contact/contact.tpl.html

    <div class='three-full-btns'>
        <a ui-sref='rmc.contact.calls.create({ cardId: 0 })' ng-if="hasPermission('rmc.calls')" title='Calls' class='btn'>
            <i class='icon-phone'></i>
        </a>

        <a ui-sref='rmc.contact.emails.create({ cardId: 0 })' ng-if="hasPermission('rmc.emails')" title='Emails' class='btn'>
            <i class='icon-envelope'></i>
        </a>

        <a ui-sref='rmc.contact.texts.create' ng-if="hasPermission('rmc.texts')" title='Texts' class='btn'>
            <i class='icon-mobile-phone'></i>
        </a>
    </div>

    <div class='three-full-btns'>
        <a ui-sref='rmc.contact.systems.create({ cardId: 0 })' title='Systems' ng-if="hasPermission('rmc.systems')" class='btn'>
            <i class='icon-ok'></i>
        </a>

        <a ui-sref='rmc.contact.forms.create({ cardId: "" })' ng-if="hasPermission('rmc.forms')" title='Forms' class='btn'>
            <i class='icon-file-text'></i>
        </a>

        <a ui-sref='rmc.contact.columns.view({ cardId: "" })' ng-if="hasPermission('rmc.columns')" title='Column Forms' class='btn'>
            <i class='icon-columns'></i>
        </a>
    </div>

【问题讨论】:

  • 是否考虑更新ui-router的版本?

标签: javascript angularjs angular-ui-router


【解决方案1】:

在您的控制器中查找$state.go(),它会在状态加载后立即将您发送到您已经处于的状态。这样做会导致您看到的行为。

【讨论】:

    【解决方案2】:

    我认为你应该在文本路由中明确声明参数,否则 ui-router 不会查看参数

     url: '/texts?cardId'
    

    https://github.com/angular-ui/ui-router/wiki/URL-Routing#important-stateparams-gotcha

    【讨论】:

    • 我从 ui-sref 中删除了 cardId,实际上并不需要它,但我仍然遇到这个问题。
    • 好的,所以你应该删除括号可能
    • 刚刚做了但没有改变,不知道如何复制这个:/
    • 只是试一试,你能添加这个选项吗:ui-sref-opts="{reload: true }"
    • 我有同样的行为
    【解决方案3】:

    这里可能有问题:

    <a ui-sref='rmc.contact.texts.create({ cardId: 0 })'
    
    ...
    
    url: '/create',
    

    你错过了?cardId

    【讨论】:

    • 我删除了{ cardId: 0 },但仍然遇到这个问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-02
    • 2016-07-28
    • 2019-03-26
    • 2013-09-17
    相关资源
    最近更新 更多