Question

我有一个简单的按钮，在Ionic + Angular应用程序中打开一个模态。单击按钮后，模态模板会正确显示：

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

正如您所看到的，模态包含3个按钮，每个按钮调用相同的功能但参数不同。我有这个包含功能的控制器：

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

问题是，无论在模态中单击哪个按钮，都会使用第一个按钮的参数调用函数addPopularTag（在本例中为china）。我检查了按钮的html源代码，并使用不同的参数正确呈现它们。

Here is a reproduction of the issue in Codepen. 你可以在控制台中看到它。

Answer 1

替换

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

带

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

我不知道标签的作用

从Ionic模态调用函数后参数搞乱

1 个答案: