CODEWITHSUNDEEP
angularjsionic-frameworkcontrollermodal-dialog
Burak Güneli
Burak Güneli

Reputation: 124

How to open a modal in a div which already has a controller (AngularJs)

<ion-list>
    <ion-item>
        <div id="result_1" class="result">
            <p class="title" ng-repeat="item in result | filter: query">
                <span class="ic"><b>{{item.name}}</b></span>
                <a href="#" class="ic1">Click for details...</a>
            </p>
            <div class="clear"></div>
        </div>
     </ion-item>
</ion-list>

this is a part of my first Ionic project, i'm new in this framework and AngularJs, so I have a controller which searchs for data in a json file.

I need to open a modal when user clicks on

<a href="#" class="ic1">Click for details...</a>

but when I searched about it, I figured out that I need another controller for creating a modal.

I already have a controller in my whole page, how can I add another controller to that specific line? Or do you know any other way to create a modal without using another controller?

Upvotes: 0

Views: 841

Answers (1)

Dinesh Ram
Dinesh Ram

Reputation: 402

<ion-item>
  <div id="result_1" class="result">
      <p class="title" ng-repeat="item in result | filter: query">
          <span class="ic"><b>{{item.name}}</b></span>
          <br>
          <br>
          <span ng-click="popUp()" class="ic1">Click for details...</span>
      </p>
      <div class="clear"></div>
  </div>
</ion-item>

script:

  • using $ionicPopup

    $scope.popUp = function() {
    var alertPopup = $ionicPopup.alert({
        title: 'More Details...',
        template: 'decription', // templateUrl:'myModalContent.html'
        buttons: [{
            text: '<b>OK</b>',
            type: 'button-assertive'
        }]
    });
 };

check this link for Details

  • using Ui bootstrap 

    $scope.popUp = function() {

var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html'
    resolve: {
        data: function() {
            return $scope.data;
        }
    }
});

    }

There are many options you can pass. You can give a controller for your pop up too. check this link for ui.bootstrap.modal

Upvotes: 1

Related Questions