Burak Güneli Burak Güneli - 5 months ago 17
AngularJS Question

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?

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