Reputation: 124
<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
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