2017-01-02 92 views
2

如果我使用href,UI路由器按預期工作。但是,如果我使用ui-sref,它不會按預期工作。Angular UI路由器的'ui-sref'按預期工作

我有兩個問題,通過下面的例子:

  • 錨 '鏈接系列-2-NO-PARAM' 和 '鏈接系列-2-酮-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> 

我在上面的示例中錯過了什麼?

回答

0

在這種情況下所經歷的行爲,從一個事實,即我們使用$state.go選項來:{ reload: true }

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

檢查文檔https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state $狀態#methods_go

重裝( v0.2.5) - {boolean = false | string | object},如果true將強制轉換,即使沒有狀態或參數已經改變。這將刷新解析和看法的當前狀態和父狀態......

而且在this example,我們可以看到,任何ui-sref,甚至缺失參數,可以導航到...,因爲它是被迫

但是,如果我們將使用默認(原生)的方法,即狀態重載只有在有任何改變(例如參數變化)

That example顯示,在行動

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

直到任何PARAMS的改變 - 沒有狀態變化被觸發。希望有一點幫助...

+0

瞭解。但是,即使對於「reload:true」和參數的更改,如果我們開始點擊所有'link-2'系列(按順序)並且相反地執行相同操作,結果也不一致。 – user203687

+0

具體來說,如果我們在link-2-series-two-param(params中存在差異)之後點擊link-2-series-one-param,則它不會爲link-2-series-one- param – user203687

+0

這裏的要點是 - 用'$ state.go',也就是'ui-sref',我們提供了前一次運行的$ stateParams。所以,如果**:b **的值已經通過...並且現在不存在,它將仍然存在...重用。如果這是一個錯誤,我不確定。我會說什麼?請儘可能在這裏浪費時間。嘗試調整您的應用程序,將兩個參數傳遞給ui-sref。即顯式NULL或-1 ... –