Invoke Javascript from Template

Ionic Framework ionic-v3
1

I’m trying to invoke a javascript function directly from a button click.

In Angular, I could do this:

<button onclick="javascript:invokeGoBack();">

where the invokeGoBack() function was defined in a separate .js file, and

declare var invokeGoBack: any;

is included in my typings.d.ts file.

I’ve tried something similar in Ionic, but the parser doesn’t like the colon in the function. I cannot convert this function (as far as I know) to typescript because it calls another function which is injected at runtime.

What’s the right way to call a javascript function from the template in ionic?

2

I figured it out. In case others need to do the same, here’s what I did:

In my template:

 <button ion-button icon-only onclick="javascript:invokeGoBack();">   
        <ion-icon name="arrow-back"></ion-icon>
  </button>

In Index.html:

<!-- jquery required for running js from template -->
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- include javascript function in assets folder -->
  <script src="assets/scripts/invokecs.js"></script>

Then added my invokeGoBack function in the .js file.

Maybe there’s a better way, but this is what worked for me…

1 Like
3

I don’t think this should be emulated. Templates should only call functions in their controller, else we have unmaintainable and unreadable spaghetti.

4

@rapropos Thanks for your feedback. I wonder if you could suggest an alternative? As I mentioned, typescript does not allow for the flexibility of injecting a function at runtime (that I know of), so I’m not sure how else I would allow for that in my controller. Suggestions?

5

I would suggest doing whatever it is that you’re trying to do using Angular, so you can get rid of jQuery and the problematic situation of having two frameworks fighting over the DOM.

6

I agree with @rapropos, and I wonder if you’ve tested your code on a couple mobile devices? For your app to respond fast, it’s a good idea to be as precise about the DOM as possible. Basically, you shouldn’t call the DOM (except for some rare cases) and instead Angular does everything. The jQuery library was written for an entirely different use case. Unless you’re using a function that is optimized for mobile, I’d be careful about using it.

7

Ah, I see… So, I should tell you that I am a long-time C# developer, but brand new to Angular and web development in general, so please bear with me!

What I am attempting to do is a bit strange, I know, but here goes…

I am working under the requirement that the customer should only have to update the mobile application on rare occasions, and as such, the UI should be provided via a web server in the form of web pages. We have started down the path of using a Xamarin (C#/XAML) mobile “shell” application that would be able to host web pages as well as provide us with native hardware access.

The prescribed method for communicating between Xamarin and Angular (or by extension, Ionic) is to use a “javascript bridge”. This basically allows C# to inject a callback function into the HTML at runtime. So, for example, you could hit a button on the hosted web page, and have it call back into C# in order to launch the camera. The only way I was able to accomplish this in Angular was using the code I showed above, and it seemed to work. I progressed this experiment to using Ionic since it provides a mobile look and feel that I don’t get OOB with Angular.

Believe me, I know this seems all terribly hacked together and is bound to lead to problems, but I haven’t seen another way to do this and certainly am open to suggestions that can achieve this “serve most UI from web” limitation and still give a great mobile experience.

Thanks for your advice and any other help you can offer!

BTW: This group achieved something similar using Xamarin/Angular. There is a presentation in the link. http://northdallas.net/meetings/how-we-built-a-mobile-electronic-health-record-app-using-xamarin-angular-and-web-api/

8

It depends what you mean by an app update. If you haven’t looked at Ionic Deploy, I’d suggest that as your very first stop. It might be a much cleaner way to achieve what you need.

9

I don’t think Ionic is going to be a great fit for that. Ionic achieves roughly similar functionality using the Cordova ecosystem. You are basically looking to merge two complete frameworks that are both expecting to have complete control over the same domain.