Parametry pomieszane po wywołaniu funkcji z modemu jonowego

Question

Mam widok za pomocą prostego przycisku otwierającego modal w aplikacji Ionic + Angular. I modalne szablon pojawiające poprawnie po kliknięciu przycisku:

<ion-modal-view> 
    <ion-header-bar> 
    <h1 class="title">Popular tags</h1> 
    <div class="buttons"> 
     <button class="button button-clear button-stable" ng-click="closePopularForm()">Close</button> 
    </div> 
    </ion-header-bar> 
    <ion-content> 
     <div class="list"> 
     <div class="item-divider text-center"> 
      Select a tag to follow. 
     </div> 
     <label class="item"> 
     <button class="button button-balanced" ng-click="addPopularTag('china')">China</button> 
      <button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button> 
      <button class="button button-balanced" ng-click="addPopularTag('us')">United States</button> 
     </label> 
     </div> 
    </ion-content> 
</ion-modal-view> 

Jak widać modalna zawiera 3 przyciski, każde wywołanie tej samej funkcji, ale z innego parametru. Muszę ten kontroler zawierający funkcję:

app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) { 

    $ionicModal.fromTemplateUrl('add-popular.html', { scope: $scope }).then(function(modal) { 
     $scope.modalPopular = modal; 
    }); 

    $scope.closePopularForm = function() { 
     $scope.modalPopular.hide(); 
    }; 

    $scope.openPopularForm = function() { 
     $scope.modalPopular.show(); 
    }; 

    $scope.addPopularTag = function(poptag) { 
     console.log(poptag); 
     console.log('pop form submited '+poptag); 
    }; 
}); 

Problemem jest to, że w zależności od tego przycisku powoduje w modalnej addPopularTag funkcja jest wywoływana z parametru pierwszego przycisku (który jest china w tym przypadku). Sprawdziłem źródło html przycisków i są one renderowane poprawnie z różnymi parametrami.

Here is a reproduction of the issue in Codepen. Można to zobaczyć w konsoli.

Answer 1

Wymień

<label class="item"> 
    <button class="button button-balanced" ng-click="addPopularTag('china')">China</button> 
    <button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button> 
    <button class="button button-balanced" ng-click="addPopularTag('us')">United States</button> 
</label> 

z

<button class="button button-balanced" ng-click="addPopularTag('china')">China</button> 
<button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button> 
<button class="button button-balanced" ng-click="addPopularTag('us')">United States</button> 

nie wiem co robi etykieta chociaż