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，即使有缺失的参数，也会被导航到......因为它是强制

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

That example显示了行动

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

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

Angular UI-Router的'ui-sref'无法按预期工作

1 个答案: