2016-08-25 30 views
8

我用一个简单的按钮打开了Ionic + Angular应用程序中的模态。和按钮后正确显示一个模式模板点击:参数从Ionic模态函数调用后搞砸了

<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. 您可以在控制台中看到它。

回答

2

更换

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

我不知道该标签做什么,虽然

+0

这工作。谢谢。不过,我仍然不明白为什么标签标签搞乱了函数调用。 – neptune

+0

我觉得'