Issues with Ionic's $state.go and ui-sref functions not functioning as expected in the app

While attempting to change the view on the Ionic View app for iOS (I have not tested on the Android app), I encountered a bug that seems to have a solution, but unfortunately, it does not work for me.

Bug info: Bug info 2:

My Ionic information is as follows:

Cordova CLI: 5.3.3
Ionic Version: 1.1.0
Ionic CLI Version: 1.7.7
Ionic App Lib Version: 0.6.3
ios-deploy version: 1.8.2 
ios-sim version: 5.0.2 
OS: Mac OS X El Capitan
Node Version: v4.1.1
Xcode version: Xcode 7.0.1 Build version 7A1001

and my app.js includes:

$stateProvider

      // State definitions omitted for brevity

Essentially, I have different views for login, register, and more that lead to an index page with tabs. Within one tab, there are further nested tabs. While this structure works in browsers and Xcode simulation, it fails to function properly in the Ionic View app even after trying various methods such as href, ui-sref, and state.go(). I am seeking assistance to resolve this issue.

Thank you for your help!

javascriptiphoneangularjsionic-frameworkionic-view

Answer №1

Encountered the same issues. Here is my recommended solution:

  1. Apply this patch: https://gist.github.com/IgorMinar/863acd413e3925bf282c Simply place it in your project directory, add a <script src=...> to index.html in your ionic project, and include a dependency in app.js like so: 
    angular.module('myApp', ['ngRoute', 'ngIOS9UIWebViewPatch'])
  2. Download and replace the latest version of Angular (https://code.angularjs.org/1.4.7/) in [your ionic project]/www/lib/js/angular
    The files to replace are: angular-animate.js, angular-sanitize.js, angular.js

  3. Replace them instead of using ionic-bundle.js, so that your index.html head will appear as follows:

    <script src="lib/ionic/js/ionic.js"></script>
<script src="lib/ionic/js/ionic-angular.js"></script>

<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>

<script src="angular-ios9-uiwebview.patch.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

  4. Ensure XCode is updated to version 7.1

  5. Open the project [your project name].xcodeproj in [your ionic project]/platforms/ios. XCode may prompt you to address some warnings, please follow through with any fixes suggested.
  6. Compile and run the project from XCode

Following these steps resolved the issues in my project

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I desire to receive comments only once since they are being rehashed repeatedly

On the server-side: This is where I retrieve the comment from the server db.postSchema .findOne({ _id: comment.post }) .populate("owner") .exec((err, users) => { for (let i = 0; i < ...

javascriptnode.jsvue.jsvuejs2socket.io

When attempting to navigate to a different page in Next.js, the Cypress visit functionality may not function as

In my upcoming application, there are two main pages: Login and Cars. On the Cars page, users can click on a specific car to view more details about it. The URL format is as follows: /cars for the general cars page and /cars/car-id for the individual car p ...

javascriptnext.jscypress

Is it feasible to utilize the return value of an Async call to display or conceal an alert message?

Before this gets closed as a duplicate, I have searched through numerous threads on the forum that do not address my specific question. Please take the time to read. Here is the scenario: when a user clicks a button, JavaScript needs to validate whether t ...

javascriptasp.netajaxboolean

Incorporating ngRoute for routing with an Express backend

After reading multiple answers regarding this topic, I am still struggling to grasp the concept. Currently, I have an angular front-end and I am attempting to utilize $routeProvider to load partials for my single page application. However, I keep encounter ...

angularjsnode.jssingle-page-application

Adjust hover effects based on true conditions

Currently working on a web app using HTML, CSS, JavaScript, and AngularJS. Progress so far includes a clickable box that triggers a javascript function to display more boxes upon click using ng-click. <div ng-click="!(clickEnabled)||myFunction(app)" cl ...

javascripthtmlcssangularjsangularjs-ng-click

How to utilize DefinePlugin in Webpack to pass NODE_ENV value

I am attempting to incorporate the NODE_ENV value into my code utilizing webpack through the use of DefinePlugin. I have reviewed a similar inquiry on Stack Overflow, but I am still encountering issues. Here is the configuration I am working with: In pac ...

javascriptnode.jsnpmwebpack

Utilizing React forwardRef with a functional component

Looking at my code, I have defined an interface as follows: export interface INTERFACE1{ name?: string; label?: string; } Additionally, there is a function component implemented like this: export function FUNCTION1({ name, label }: INTERFACE1) { ...

javascriptreactjstypescriptrefreact-forwardref

What is the best way to incorporate Express following an asynchronous function?

After setting up my Firebase and initializing it, I managed to retrieve data from it. However, I encountered an issue when trying to use express.get() and json the data into the server. I'm unsure of what the problem could be. let initializeApp = requ ...

javascriptnode.jsreactjsfirebase

Decoding JSON in Angular

Hey there, I'm facing a bit of a challenge. My Angular JSON GET process is grabbing the results properly, but I'm struggling to parse and access individual values from the result. Here's the string result that I receive: {"result":[{"sys_i ...

angularjsjson

What steps can be taken to enhance cleanliness and efficiency, and what are some recommended practices to adhere to?

Currently, I am in the process of developing a user authentication system on the backend. Specifically, I have implemented a POST method for registering new users. userRouter.post("/", expressAsyncHandler(async (req, res) => { try { const { na ...

javascriptnode.jsexpressbackend

Ways to stop values from being turned into strings in javascript?

let str; let displayedNum; for (let i in imgURLArray){ str = "<li photonum="+i+">" + "<a>"+ (1+i) + "</a>" + "</li>"; $("ul.selection-list").append(str); } While looping through, I encountered an issue wher ...

javascript

What is the best way to save the output of a middleware in express js so that it can be conveniently accessed by the rest of the

Currently, I am working with a middleware that returns an object. My goal is to save this object so that other parts of the application can utilize the data it contains. How can I achieve this? This snippet is from my app.js file: import { myMiddlewareFun ...

javascriptnode.jsexpress

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Here is the HTML code snippet I am working with: <div> hello world <p> the world is round <img src="domain.com/world.jpg"> </p> </div> I am looking to replace the word "world" (or any mixed case variations) with < ...

javascripthtml

Why are there red squiggly lines appearing on properly written JavaScript code in Visual Studio Code?

Recently, I've been encountering a frustrating issue with irritating red squiggly lines appearing under my import statement. Despite the fact that the code functions perfectly and everything operates as anticipated, these lines continue to bother me. ...

javascriptvisual-studio-code

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

JavaScript error occurring when trying to validate Ajax response

I am attempting to create a report using a dynamically generated form. The form loads successfully through XMLHttpRequest, but the validation for the form fields does not seem to be working. I have experimented with using eval() and found that it only work ...

phpjavascripthtmlajax

Challenges with ColdFusion's floating point calculations

I am encountering an issue with my program where it is not displaying two decimal points properly. For example, when I enter 140.00, it shows as 140.0. Strangely, if I enter 140.15, it displays correctly as 140.15. It seems to consistently drop the zero. B ...

javascriptcoldfusion

Creating TypeScript modules for npm

I have been working on creating my first npm module. In the past, when I used TypeScript, I encountered a challenge where many modules lacked definition files. This led me to the decision of developing my module in TypeScript. However, I am struggling to ...

javascriptnode.jsnpmtypescript

What is the method for choosing an Object that includes an Array within its constructor?

Is there a way to retrieve a specific argument in an Object constructor that is an Array and select an index within the array for a calculation (totaling all items for that customer). I have been attempting to access the price value in the Items Object an ...

javascripthtml

Modifying ID styling using JavaScript on Internet Explorer

I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...

javascripthtmlcssinternet-explorerdisplay