傳入URL寬度離子數組

Question

大家 :)

我有一個數組lesMusiques，當我點擊一個音樂，我想有這一個信息。 例如，如果我選擇第一個，我必須有數組：{「id」：「30」，「image」：「/ img/panda-desiigner-jpg.jpg」，「artiste」：「Desiigner」 ，「titre」：「熊貓」，「duree」：「2:05」}

但我不知道如何將它作爲參數傳遞給url。我見過這樣進入陣列的每個值的東西，但我希望這不是唯一的解決辦法..

有我的代碼：

var lesMusiques = [ 
    {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"}, 
    {"id":"31", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "4:22"}, 
    {"id":"32", "image":"/img/Dont-Mind-Kent-Jones.jpg", "artiste":"Kent Jones", "titre":"Don't mind", "duree": "3:31"}, 
    {"id":"33", "image":"/img/Jain_Cover_Album.jpg", "artiste":"Jain", "titre":"Come", "duree": "32:23"}, 
    {"id":"34", "image":"/img/Snoop-dogg.jpg", "artiste":"Snoop Dogg", "titre":"This city", "duree": "33:54"}, 
    {"id":"35", "image":"/img/another-love.jpg", "artiste":"Tom Odell", "titre":"Another love", "duree": "34:22"} 
]; 

.controller('HomeCtrl', function($scope, $state){ 

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */ 
    $scope.recupId = function(tabMusic){ 
    $state.go('music', {tabMusic}) 
    } 

// On indique à la vue qu'elle dispose maintenant du tableaux contenant les musiques 
    $scope.lesMusiques = lesMusiques; 
}) 

.controller('MusicCtrl', function($scope, $stateParams){ 
    console.log($stateParams); 
}) 

而且我stateProvider：

$stateProvider.state('music',{ 
    url: '/musiques/:TabMusiques', 
    templateUrl: 'templates/music.html', 
    controller: 'MusicCtrl' 
}) 

在我視圖（home.html做爲）：

<ion-list> 
     <!-- Chaque item est un lien --> 
     <a ui-sref="music" ng-repeat="laMusique in lesMusiques" ng-model="TabMusic" ng-click="recupId(I DON'T KNOW WHAT TO PUT HERE)" class="item item-thumbnail-left"> 

       <img src="{{laMusique.image}}"> 
       <h2 class="white">{{laMusique.titre}}</h2> 
       <p class="white">{{laMusique.artiste}}</p> 
       <p class="padding-vertical white">{{laMusique.duree}}</p> 
     </a> 
</ion-list> 

我希望你們中的一些會幫我:)

編輯：我的主頁：

編輯2： 當我需要console.log($state.parameters.musiqueChoisi);我有一個錯誤：無法讀取屬性未定義 'musiqueChoisi'！爲什麼？

現在我的代碼是：

$stateProvider.state('music',{ 
    url: '/musiques', 
    parameters: { musiqueChoisi : null }, 
    templateUrl: 'templates/music.html', 
    controller: 'MusicCtrl' 
}) 

和HomeCtrl：

.controller('HomeCtrl', function($scope, $state){ 

/* On passe l'id de la musique sélectionnée au controlleur MusicCtrl */ 
    $scope.recupId = function(tabMusic){ 
    $state.go('music', {musiqueChoisi : tabMusic}) 
    } 
}) 

MusicCtrl：

.controller('MusicCtrl', function($scope, $stateParams, $state){ 
    $state.parameters.musiqueChoisi 
    console.log($state.parameters.musiqueChoisi); 
}) 

編輯3：解決方案（感謝C.Champagne）

因此，有我的控制器：

.controller('HomeCtrl', function($scope, $state){ 

    $scope.recupId = function(tabMusic){ 
     $state.go('music', {musiqueChoisi : tabMusic}) 
    } 
    $scope.lesMusiques = lesMusiques; 
}) 

.controller('MusicCtrl', function($scope, $stateParams, $state){ 
    var musique = $state.params.musiqueChoisi 
    console.log(musique); 

    $scope.musique = musique; 
}) 

的StateProvider：

$stateProvider.state('music',{ 
    url: '/musiques', 
    params: { musiqueChoisi : null }, 
    templateUrl: 'templates/music.html', 
    controller: 'MusicCtrl' 
}) 

在我看來：

ng-click="recupId(laMusique)" 

Answer 1

我認爲你應該使用go方法對$state服務在你的狀態下定義一個參數。

$stateProvider.state('music',{ 
    url: '/musiques', 
    params: {musicData : null}, 
    templateUrl: 'templates/music.html', 
    controller: 'MusicCtrl' 
}) 

，你應該把它叫做方式：

$state.go('music', {musicData : tabMusic}); 

看一看this answer

編輯

爲了回答您的意見，我覺得你ng-click（以你的看法）應該是：

ng-click="recupId(laMusique)" 

或作爲您函數的名稱表明，它

ng-click="recupId(laMusique.id)" 

...但你必須從你的ID檢索您的對象。

而且......哦我忘了...來檢索您的視圖參數：

var musique = $state.params.musiqueChoisi; 

（不要忘記設置$state作爲控制器的參數）

只是兩個小小的話讓我看起來又老又蠢，脾氣暴躁：

1. {"id":"30", "image":"/img/panda-desiigner-jpg.jpg", "artiste":"Desiigner", "titre":"Panda", "duree": "2:05"}是一個對象，而不是一個數組。
2. 我愛法語（這是我的母語），我理解打算保存它的人。不過，我總是用英文編碼和評論，因爲我知道我當然必須分享或傳輸代碼，或與無法理解的人協作。