How to call JS code from within a template?

ionic-v1
1

Very novice question as I don’t seem to have understood yet the directory structure of Ionic. I have a number of different template files. The tree structure something looks like:

index.html
—template1.html
—template2.html
—template3.html

My index.html has all the header files and css files and js files being imported, etc. The body looks very basic, like this:

  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-positive nav-title-slide-ios7 has-tabs-top">
      <ion-nav-back-button class="button-clear">
        <i class="ion-arrow-left-c"></i> Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>

One of my template files, for example, looks like this:

<ion-view title="Login" >
    <ion-content has-header="true" padding="true" class="login">

        <center><img src="/img/logo.png" id="mylogo" class="slideRight logo"></center>

        <a class="btn-auth btn-facebook large hidden hatch" ng-click="login('facebook')">
            Sign in with <b>Facebook</b>
        </a>
        <script>
            var logo = document.getElementById("mylogo");
            console.log("started login");

            logo.setTimeout(function() {
                console.log("inside timeout")
                $(this).addClass("tossing");
            }, 2000);
        </script>

    </ion-content>
</ion-view>

But in this template file, the code inside the script tags doesn’t run. I tried moving this piece of code into the index.html file. This time it ran, but it did not recognize the selector I was looking for as I’m guessing because it was searching only index.html file for the element and not the template files.

Could someone please help me understand how Ionic expects these kinds of Javascript snippets to be used and how I’m meant to do it? The reason why I want to run code like this is to do custom animations that are only meant to be triggered on a single page.

Any help is appreciated. Thank you!!

2

In one of your ionic view’s event handlers (like loaded or beforeEnter) you can execute these sorts of scripts.

For example in your controller for the view:

$scope.$on("$ionicView.loaded", function() {

    //Put your script in here!

});

This will execute once when the view is loaded for the first time.

If you want it to run every time you could do a:

$scope.$on("$ionicView.beforeEnter", function() {

    //Put your script in here!

});

You can see a summary of these events at http://ionicframework.com/docs/api/directive/ionView/

Side point: You can use jQuery style selectors via Angular’s built-in jQLite rather than getElementById using expressions like:

var canvasElement = angular.element(document.querySelector('#page-6-canvas'));

…docs at https://docs.angularjs.org/api/ng/function/angular.element. I find it helpful when port jQuery centric code to Angular without having to include the whole jQuery library.

4 Likes
3

@bmwilson74 Yes it worked perfectly. Thanks