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”未按预期工作 的相关文章

随机推荐