Please read edit 2 as it contains the updated error
I've got an ng-repeat like this:
<ion-list>
<ion-item ng-repeat="ship in ships" href="#app/ships/{{ship.id}}">
{{ship}}
</ion-item>
</ion-list>
When you first load the page the ion-items href
work as they should. The error occurs when you add new data to the list. The href element stops working and the items are un-clickable. Refreshing the page fixes the href
The new data added shows up in the list correctly, with the correct fields and values.
Is this a bug or is there something I have to do to refresh the list?
EDIT
I'm using SQLite to save and retrieve my data, also using the factory wrapper found here: https://gist.github.com/jgoux/10738978
Adding more code:
For adding a new ship I just open a modal window with input fields and a submit button.
// Called when the form is submitted
$scope.createShip = function (ship) {
shipFactory.saveShip(ship)
.then(function () {
$scope.shipModal.hide();
updateScope();
$scope.newship = {};
});
};
Updating the scope
function updateScope() {
shipFactory.getAllShips().then(function (ships) {
$scope.ships = ships;
});
}
EDIT 2 After being unable to recreate the problem in a plunker. I learned that it is the modal that is causing the error. Opening then closing the modal causes the error (no saving).
Modal code:
// Create and load the Modal
$ionicModal.fromTemplateUrl('new-ship.html', function (modal) {
$scope.shipModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});
// Open our new ship modal
$scope.newShip = function () {
$scope.shipModal.show();
};
// Close the new ship modal
$scope.closeNewShip = function () {
$scope.shipModal.hide();
};
I have tried adding $scope.shipModal.remove();
but the links are still broken. Creating a 'Drag' event fixes all the links. For example: Dragging the navigation menu to the view.
After some trial and error, I finally fixed my problem. Although I don't fully understand why it would matter, the error occurs because of where I placed the <button>
element.
If the button is placed inside a <ion-nav-buttons>
tag, the error occurs.
<!--This doesn't work-->
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-plus-circled" ng-click="newShip()"></button>
</ion-nav-buttons>
Placing the button anywhere inside the <ion-content>
tag has worked as expected.
<ion-content class="has-header">
...
<button ng-click="newShip()">New ship</button>
</ion-content>