Search code examples
javascriptangularjsionic-frameworkionic-view

Ionic Modal Parameter not working

My Modal Code here

$ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });

My Button and Function code Here (button in modal)

<button class="button button-icon ion-ios-star-outline rate" ng-repeat='i in rate_num' ng-click='rateStar(i)'></button>//rate_num = [1,2,3,4,5];

$scope.rateStar = function(n){
      console.log(n);
      $rootScope.rate = n;
    };

it works fine no modal. butin modal it is not working.

when i click that button i want to console.log(Number); ex) when i click first button, i want to console.log(1), after click second -> console.log(2).. and so on

but now that code run only console.log(1) -> only first element called... where is wrong...?

Solution

  • Try this:

    index.html :

    <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller="ModalDemoController">
        <button ng-click="showModal()">Show</button>
      </ion-content>
    </ion-pane>
  </body>
  <script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar class="dark">
      <h1 class="title">Modal Demo</h1>
      <button class="button button-clear ion-close" ng-click="closeModal()"></button>
    </ion-header-bar>
    <ion-content class="content-stable">
        <button  ng-repeat='i in rate_num' class="button button-icon ion-ios-star-outline rate"  ng-click='rateStar(i)'> {{i}}</button>
      </ion-content>
  </ion-modal-view>
</script>

    and Controller:

    .controller('ModalDemoController', function($scope,$ionicModal) {

    $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
    });
    $scope.rate_num = [1,2,3,4,5];
    $scope.showModal = function() {
      $scope.modal.show();
    };

    $scope.closeModal = function() {
      $scope.modal.hide();
    };    
    $scope.rateStar = function(n){
      console.log(n);
      $scope.rate = n;
    };
});

    Hope this will help you.