Angular UI-Router 的“ui-sref"没有按预期工作

问题描述

如果我使用 href，UI 路由器会按预期工作.但是，如果我使用 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＞<小时><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',控制器:'演示1'}).state('root', {网址:'/'，模板:'<strong>你是 root..点击别的东西</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:

a = {{a}}, b = {{b}}

我在上面的示例中遗漏了什么?

解决方案

在这种情况下所经历的行为来自我们使用 $state.go 选项的事实:{ 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) 方法，则只有在发生任何更改时才会重新加载该状态(例如参数更改).

该示例表明了这一点

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

If I am working with href, UI Router works as expected. But, if I am using ui-sref, it is not working as expected.

I have two issue with the following example:

• the anchors 'link-series-2-no-param' and 'link-series-2-one-param' do not trigger 'otherwise' (they do in 'link-series-1'). What to do if they need to go to 'otherwise'?
• if you click all 'link-series-2' and do the same in reverse, it's not going to work (always shows the result of 'link-series-2-two-params', even if you click on others)

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>

What am I missing in the above sample?

解决方案

The behaviour experienced in this case, is coming from a fact that we use an $state.go option : { reload: true }

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

Check the doc https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.$state#methods_go

And in this example, we can see, that any ui-sref, even with missing params, is navigated to... because it was forced

But, if we will use the default (native) approach, that state is reloaded only if there is any change (e.g. parameter change).

That example shows that in action

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

Until any of params is changed - no state change is triggered. Hope that helps a bit...

这篇关于Angular UI-Router 的“ui-sref"没有按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！