Parameters messed up after function call from Ionic modal

Question

I have a view with a simple button opening a modal in an Ionic+Angular app. And a modal template appearing correctly after the button is clicked:

<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>

As you can see the modal contains 3 buttons, each calling the same function but with different parameter. I have this controller containing the function:

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);
    };  
});

The problem is that whichever button is clicked in the modal, the function addPopularTag is called with the parameter of the first button (which is china in this case). I have checked the html source of the buttons and they are rendered correctly with different parameters.

Here is a reproduction of the issue in Codepen. You can see it in the console.

AshBringer AshBringer · Accepted Answer · 2016-08-25T09:23:38

Replace

<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>

with

<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>

I don't know what the label does though

Parameters messed up after function call from Ionic modal

1 Answers