Angular UI-Router 的“ui-sref”未按预期工作

2024-05-03

如果我使用 href,UI Router 将按预期工作。但是,如果我使用 ui-sref,它不会按预期工作。

我对以下示例有两个问题:

  • 锚点“link-series-2-no-param”和“link-series-2-one-param”不会触发“otherwise”(它们在“link-series-1”中触发)。如果他们需要去“其他”怎么办?
  • 如果您单击所有“link-series-2”并反向执行相同操作,则它将不起作用(始终显示“link-series-2-two-params”的结果,即使您单击其他)

a01.htm:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js" ></script>
    <script type="text/javascript" src="a01.js"></script>
...
<a ui-sref='root'>Home</a>
    <br>
    <a href='#/demo1/'>link-series-1-no-param</a>
    <a href='#/demo1/30'>link-series-1-one-param</a>
    <a href='#/demo1/30/40'>link-series-1-two-param</a>
    <br>
    <a ui-sref-opts="{reload: true, notify: true}" ui-sref='demo1'>link-series-2-no-param</a>
    <a ui-sref-opts="{reload: true, notify: true}" ui-sref='demo1({a: 30})'>link-series-2-one-param</a>
    <a ui-sref-opts="{reload: true, notify: true}" ui-sref='demo1({a: 30, b:40})'>link-series-2-two-param</a>
    <hr>
    <div ui-view></div>

a01.JS:

var app = angular.module('app', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
    $stateProvider
    .state('demo1', {
        url: '/demo1/:a/:b', 
        templateUrl: 'demo1.htm',
        controller: 'demo1'
    })
    .state('root', {
        url: '/',
        template: '<strong>you are at root..click something else</strong>'
    });

    $urlRouterProvider.otherwise("/");
}]);

app.controller('demo1', ['$scope', '$stateParams', function($scope, $stateParams){
    $scope.a = $stateParams.a;
    $scope.b = $stateParams.b;
    console.log('a = ' + $stateParams.a + ', b = ' + $stateParams.b);
}]);

演示1.htm:

<div>
    a = {{a}}, b = {{b}}
</div>

上面的示例中我缺少什么?


在这种情况下经历的行为来自于我们使用$state.go选项 :{ reload: true }

<a ui-sref-opts="{reload: true ...

检查文档https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.$state#methods_go

重新加载 (v0.2.5) - {boolean=false|string|object},如果 true 将强制转换,即使没有状态或参数发生更改。它将重新加载当前状态和父状态的解析和视图......

And in 这个例子 http://plnkr.co/edit/yXaSSrWnWD7T2n1M8dZg?p=preview,我们可以看到,任何ui-sref,即使缺少参数,也会被导航到...因为它是forced

但是,如果我们使用默认值(native)方法,仅当有任何变化时才会重新加载该状态(例如参数更改).

那个例子 http://plnkr.co/edit/vmjYD5x7Fz9WR86P4sZ1?p=preview表明在行动中

<a ui-sref-opts="{reload: false ...

在更改任何参数之前 - 不会触发任何状态更改。希望有点帮助...

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular UI-Router 的“ui-sref”未按预期工作 的相关文章

  • 如何在单元测试中的请求之间更改 $httpBackend when[method] 语句?

    在我的测试中 我启动一些模型数据并模拟响应 beforeEach function var re new RegExp http users online httpBackend whenGET re respond id 12345 us
  • 使 WebAPI 操作异步?

    我有一个问题 关于在 WebAPI MVC 控制器 AJAX 请求上使用 async await 是否有益 假设我有一个与 Web API 后端对话的 AngularJS 应用程序 并且我想获取一些数据 我对 Web API 进行了一些 A
  • 如何使用 Angular 创建 n 个可打印页面?

    嗯 我搜索了一下 没有找到类似的东西 我想知道如何使用 Angular 创建可打印内容 跳转到页面末尾并打印更多内容 如何强制内容始终适合特定尺寸 例如 PDF 我需要 Angular 来执行此操作吗 如果不是 HTML 我可以迭代 PDF
  • AngularJS 中的重定向状态

    这是状态配置 angular module grabhutApp config function stateProvider urlRouterProvider stateProvider ACCOUNT state account abs
  • AngularJS limitTo 按最后 2 条记录

    可以结合AngularJS吗filter https docs angularjs org api ng filter filter order https docs angularjs org api ng filter orderBy
  • 身份验证在不应该返回“401(未经授权)”时返回

    我第一次设置身份验证功能 在用户登录后得到了一些意外的结果 一位同事给了我一个具有工作身份验证的应用程序 以模仿我的应用程序 看起来我所做的一切都是正确的 我在前端使用 AngularJS 在后端框架使用 SailsJS 并且护照JS ht
  • AngularJS 中“href”和“ng-href”的区别

    我都用过href and ng href我看不出它们之间的区别 为什么 Angular 有ng href属性 什么时候应该使用它 从文档中 https docs angularjs org api ng directive ngHref 使
  • Angular UI 路由器嵌套视图问题

    我在理解 Angular UI Router 嵌套视图的工作原理时遇到了一些问题 我的 stateProvider 看起来像这样 stateProvider state login url login views main template
  • ui-sref 和变量状态参数名称

    我想呈现一个链接 例如 a 其中州名myState和钥匙myKey是变量 有办法做到这一点吗 我发现自己处于同样的情况 我也无法完成这一点 尝试使用 ng click 移动代码 并在 ng click 函数内部使用 stage go htt
  • AngularJS:服务、提供商、工厂

    之间有什么区别Service Provider and Factory在 AngularJS 中 从我得到的 AngularJS 邮件列表一个惊人的线程 https groups google com forum msg angular 5
  • 将 bootstrap 迁移到 v4 - 弹出窗口不起作用

    我在将 Bootstrap 从版本 3 迁移到版本 4 时遇到问题 问题在于弹出窗口和 popper js 库 每次我将鼠标悬停在某个元素上时 都会收到此错误 未捕获的类型错误 无法读取未定义的属性 indexOf 在 v computeA
  • AngularJS 不再在 Firebug 控制台中显示特定错误

    我在我的应用程序中使用 AngularJS 和 Angular Material 库 问题是 每当控制器的任何功能发生任何错误时 它都不会显示特定的错误 而是每次都会显示相同的一般错误 通过查看这些错误 您无法确定出了什么问题 这是我的控制
  • 使用 OpenIdConnect 和 angularjs 基于 Asp.net core 令牌的声明身份验证:禁止承载

    我正在使用 Asp net core rc2 和 OpenIdConnectServer 我正在使用 Angular 1 x 和 augular oauth2 几天后 我的错误已经转移到 Microsoft AspNetCore Hosti
  • “move(-1)”作为 AngularJS 表达式有什么问题吗?

    我收到此错误 parse ueoe Unexpected end of expression move 从这段代码来看
  • 将 Angularjs 动态绑定到新创建的 html 元素

    我有一个带有多个选项卡的选项卡页面 一旦单击调用服务即可返回一些数据 其中一些数据返回 html 表单并且非常随机 我想收集输入的这些值并通过服务将数据发送回服务器 我遇到的问题是我无法从我动态创建的 html 中的输入元素获取数据 我创建
  • AngularJS工厂如何返回一个对象

    我有一个要求 我应该在其中编写工厂 这个工厂应该包含3个函数init save和delete 我应该从控制器调用 init 函数 该函数返回一个对象 该对象具有执行添加和删除功能的功能 我怎样才能做到这一点 以下是我的代码 它成功执行了 i
  • 通过隔离范围进行 AngularJS 基于事件的通信

    在 AngularJS 中 一个指令如何使用基于事件的通信 emit broadcast and on 与另一个具有隔离范围的指令进行通信 我创建了两个指令 当从第二个指令中删除隔离范围时 第一个指令能够使用emit 与第二个指令成功通信
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • ChangeState 之后重置/卸载控制器(调用注销)。 AngularJS

    我正在创建一个应用程序 用户可以从 Facebook 或 Twitter 登录 登录后 用户将被定向到某个主页 在这里 控制器加载并调用我的初始函数 该函数加载特定于该用户的数据 当用户单击 注销 时 令牌将被清除 用户将被定向到登录页面
  • 使用 eclipse IDE 配置 angularjs

    我想开始使用 AngularJs 和 Java Spring 进行开发 我使用 Eclipse 作为 IDE 我想配置我的 Eclipse 以使这些框架无缝工作 我知道我可能要求太多 但相信我 我已经做了很多研究 你们是我最后的选择 任何帮

随机推荐