使用UI的路由器的狀態PARAMS作爲模型

我有有儀表板，顯示項目的不同視圖的簡單angualr應用。 /dasboard/:item是一個抽象的狀態。我的有效網址是/dasboard/item0/view0，/dashboard/item1/view0等... 我想跟蹤當前的item和當前的view，沒有附加代碼，只有在ui-router.state變量的幫助下。使用UI的路由器的狀態PARAMS作爲模型

這部分腳本

<div class=""> 
    you are looking at <strong>{{$state.current.name}}</strong> of {{$state.$current.params.item.value()}} 
</div>

是印刷與它的當前視圖當前項目。這是正確的，但不能打印視圖的項目，爲此，我指的變量$state.$current.params.item.value()，在瀏覽器中的相應的URL被改變了，但相應的不的div中的文本，我不明白我在做什麼錯在這裏。

我期待的價值我按了一下，但不是說，我總是得到參數的默認值，這是item0。

這裏是我的應用程序的精簡版。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
    <script src="https://unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myController"> 

    <ul> 
    <li><a ui-sref="dashboard.view0({item: 'item0'})">item0</a></li> 
    <li><a ui-sref="dashboard.view0({item: 'item1'})">item1</a></li> 
    <li><a ui-sref="dashboard.view0({item: 'item2'})">item2</a></li> 
    <li><a ui-sref="dashboard.view0({item: 'item3'})">item3</a></li> 
    <li><a ui-sref="dashboard.view0({item: 'item4'})">item4</a></li> 
    </ul> 

    <ul> 
    <li><a ui-sref="dashboard.view0">view0</a></li> 
    <li><a ui-sref="dashboard.view1">view1</a></li> 
    </ul> 
    <div class="" ui-view> 

    </div> 

    <strong></strong> 
    <div class=""> 
    you are looking at <strong>{{$state.current.name}}</strong> of {{$state.$current.params.item.value()}} 
    </div> 
    <script type="text/javascript"> 
    angular 
     .module('myApp', ['ui.router']) 
     .config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('dashboard',{ 
      url: '/dashboard/:item', 
      params: {item: 'item0'}, 
      controller: 'myController as vm', 
      abstract: true, 
      }) 
      .state('dashboard.view0',{ 
      url: '/view0', 
      templateUrl: 'view0.html', 
      controller: 'myController as vm' 
      }) 
      .state('dashboard.view1',{ 
      url: '/view1', 
      templateUrl: 'view0.html', 
      controller: 'myController as vm' 
      }); 

     }) 
     .run(function($rootScope, $state){ 
     $rootScope.$state = $state; 
     }) 
     .controller('myController', function($scope){ 
      $scope.items = [{'image': '','name':'item0', 'alt': 'item0_logo'}, 
       {'image': '','name':'item1','alt': 'item1_logo'}, 
       {'image': '','name':'item2','alt': 'item2_logo'}, 
       {'image': '','name':'item3','alt': 'item3_logo'}]; 
     }); 
    </script> 

    <script type="text/ng-template" id="view0.html"> 
    <h2>This is view0</h2> 
    </script> 
    <script type="text/ng-template" id="view1.html"> 
    <h2>This is view1</h2> 
    </script> 
</body> 
</html>

來源

2017-03-06 bruce_wayne

你期望'item.value（）'返回什麼？ – DevDig

任何鏈接我點擊了，如果我已經點擊了'item2'，我希望'你在看item2'的dashboard.view0，而不是它，我總是得到默認值'item0'。 –

您已在儀表板狀態中定義了默認的'params'屬性。刪除它，然後重試。 – DevDig

$ stateParams服務必須被指定爲一個狀態控制器，它會如此作用域只在該狀態下定義的相關參數可在服務對象上。

由於您的dashboard.view0沒有參數，因此打印時不會顯示任何參數。

欲瞭解更多詳情，請參閱here

來源

2017-03-06 16:05:31 mbeso

使用UI的路由器的狀態PARAMS作爲模型

回答

相關問題