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

Question

如果我使用 href，UI 路由器会按预期工作。但是，如果我使用的是 ui-sref，它就无法按预期工作。

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

• 锚点“link-series-2-no-param”和“link-series-2-one-param”不会触发“否则”（它们在“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);
}]);

demo1.htm：

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

我在上面的示例中缺少什么？

Answer 1

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

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

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

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

在this example 中，我们可以看到，任何ui-sref，即使缺少参数，也会被导航到...，因为它是强制

但是，如果我们将使用默认的 (native) 方法，那么只有在有任何更改 （例如参数更改） 时才会重新加载该状态。

That example 表明了这一点

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

直到任何参数被更改 - 不会触发状态更改。希望对您有所帮助...