0
私はアイテムのさまざまなビューを示すダッシュボードを持つ簡単なアプリケーションです。 /dasboard/:itemは抽象的な状態です。私の有効なURLは/dasboard/item0/view0,/dashboard/item1/view0などです 私は現在itemと現在のviewを追跡したいと思います。追加コードはなく、ui-router.stateという変数のみを使用しています。ui-routerの状態パラメータをモデルとして使用する
スクリプト
<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>
を参照してください？ – DevDig
私がクリックしたリンクは、 'item2'をクリックした場合、' item2'のdashboard.view0を見ています。代わりに、常にデフォルト値 'item0'を取得します。 –
ダッシュボードの状態でデフォルトの 'params'プロパティを定義しました。それを取り外してもう一度やり直してください。 – DevDig