Ion-nav-buttons iOS issue

ionic-v1
1

Hey just wondering is anyone else having issues with nav buttons on iOS? Here is my code that is in a tab view:

<ion-view title="{{activeProject.title}}">
	
	<ion-nav-buttons side="right">
		<button class="button button-clear" ng-click="newProject()">New Project</button>
	</ion-nav-buttons>
	<ion-nav-buttons side="left">
		<button class="button button-clear" ng-click="newTask()">Create Task</button>
	</ion-nav-buttons>
	
	<ion-content scroll="false">
		<div class="left-side">
			<ion-list>
				<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
				{{project.title}}
				</ion-item>
			</ion-list>
		</div>
		
		<div class="right-side">
			<ion-list>
				<ion-item ng-repeat="task in activeProject.tasks">
				{{task.title}}
				</ion-item>
			</ion-list>
		</div>
	</ion-content>
</ion-view>

Am I coding them wrong? They work fine when testing in Chrome… Any help would greatly appreciated.

Thanks

2

I threw this in a simple codepen, not sure what I should be looking for. What seems to be the issue?

3

Hey @mhartington the problem I’m having is on iOS the modal won’t open when I press the buttons. But when I test it in Chrome it works perfectly.

I have a modal firing elsewhere in the app using a button that is just on the page so there doesn’t seem to be a problem with the modal itself more the buttons on iOS.

4

Do you mind forking my codepen and putting together a demo of yours? I’ll try in on an actual device and check to see what could be the issue.

Also, are you getting any errors in your console?

5

@mhartington ok so I think I figured out the problem. I had my modal in my templates folder. This works on a web browser but would not work on iOS.

So here is the code that would only work in a browser:

$ionicModal.fromTemplateUrl('../templates/modal-add-customer.html', function(modal) {
			$scope.userModal = modal;
		}, {
			scope: $scope,
			animation: 'slide-in-up'
		});

And here is the code that works on iOS:

$ionicModal.fromTemplateUrl('new-user.html', function(modal) {
			$scope.userModal = modal;
		}, {
			scope: $scope,
			animation: 'slide-in-up'
		});

This modal is in a script tag on the page whereas the first one was in a separate file in the templates folder.

@mhartington thanks for responses and help.

6

@Bashfulmonk I noted the same thing too. Linking to a modal HTML file the is outside of the original file doesn’t seem to work on iOS, but works on Chrome when testing.

7

seems that using a relative path from / will work in ios

for example the following is working for me even if using a template that is not in the original file

$ionicModal.fromTemplateUrl('templates/modal-add-customer.html', function(modal) {
		$scope.userModal = modal;
	}, {
		scope: $scope,
		animation: 'slide-in-up'
	});