BACKGROUND
I have a list of cards generated using ng-repeat
. Each card has a button at the card bottom calling a function edit()
. edit()
would open up a modal window.
<div class="card" ng-repeat="item in list">
<div class="item item-text-wrap">
<h2>{{ item.title }}</h2>
<p>{{ item.description }}</p>
</div>
<a class="item item-icon-left positive" ng-click="edit($index)">
<i class="icon ion-edit"></i>
Edit
</a>
</div>
The function edit()
opens a $ionicModal
dialog box that slides in.
$scope.edit = function(index) {
$scope.selected = index;
$scope.openModal(); // This is from the $ionicModal example. See below.
};
I also copied in the example from ionicModal
$ionicModal.fromTemplateUrl('edit-modal.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
console.log("model removed.");
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
PROBLEM DESCRIPTION
The problem is that when I press the card’s button, which calls the ng-click handler edit
function, the modal slides in as expected but then immediately slides out again. I check the JavaScript console window and notice the “model removed.” line printed, indicating the below was triggered/called.
$scope.$on('$destroy', function() {
$scope.modal.remove();
console.log("model removed.");
});
Obviously, somehow Ionic felt something had been destroyed or went out of scope. It then recursively triggered off the destroy
event for the modal.
I am guessing if the ng-repeat
card item goes out of scope once its button is pressed, it triggers off Ionic to destroy the modal window associated with or called by it.
EXPERIMENT
To test if it is something to do with the ng-repeat
, I created a button outside of the ng-repeat
loop but in the ion-content
, which calls edit()
with a hard coded index parameter.
<button ng-click="edit(0)">Test open modal</button>
For this test, it works OK as expected. The modal opens, stays there and doesn’t disappear.
QUESTION
So any idea why a button link generated in the ng-repeat
triggers a premature destruction of the modal window? Whereas a button outside ng-repeat
doesn’t?