'ui-sref' из Angular UI-Router работает не так, как ожидалось

Если я работаю с href, UI Router работает так, как ожидалось. Но, если я использую ui-sref, он работает не так, как ожидалось.

У меня есть две проблемы со следующим примером:

  • ссылки-серия-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>

Что мне не хватает в приведенном выше примере?

Ответы

Ответ 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 приведет к переходу, даже если состояние или параметры не изменились. Он перезагрузит разрешения и представления текущего состояния и родительских состояний...

И в в этом примере мы видим, что любой ui-sref, даже с отсутствующими параметрами, перемещается в... потому что он был вынужден

Но, если мы будем использовать подход по умолчанию (native), это состояние перезагружается только в том случае, если есть какие-либо изменения (например, изменение параметров).

Этот пример показывает, что в действии

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

Пока ни один из параметров не будет изменен - ​​не будет изменено состояние. Надеюсь, что немного помогает...