Call function on navigate with angular

Question

I am using ChartJS to create a chart on a page in angular. I am running into the issue of when I navigate to a new page, and back to the original page, the JS is not called again.

Is there a way to call a javascript function or file every time an angular page navigates? I guess I'd then just see if my selector exists on the page and then call the function.

$(document).ready(function () {
    //Call on every page:
    (function ($) {
        $(window).load(function () {
            $(".bubbleScrollbar").mCustomScrollbar({
                theme: "rounded-dots"
            });

            $(".hBubbleScrollbar").mCustomScrollbar({
                //theme: "minimal-dark",
                theme: "rounded-dots-dark",
                axis: "x",
                advanced: {autoExpandHorizontalScroll: true},
                mouseWheelPixels: 150

            });

        });
    })(jQuery);

// on all chart pages:


    var ctx = $('#chart-TicketsResolved').get(0).getContext("2d");
    var data = [
        {
            value: 300,
            color: "#50AD7E",
            label: "Resolved"
        },
        {
            value: 200,
            color: "#d9d9d9",
            label: "Open"
        }
    ];
    var myDoughnutChart = new Chart(ctx).Gauge(data);
});

You should create chart using angular way, by creating directive and options should in controller. — jcubic
– jcubic, Commented Sep 19, 2015 at 12:37
Oh ok. Thanks. I'm still new to angular. I'll check that out. — Jeff
– Jeff, Commented Sep 19, 2015 at 12:40

Community · Accepted Answer · 2017-05-23 12:14:10Z

1

You can call your function by listenning to window.hashchanged event.

window.onhashchange = function () {
  console.log('my function runs every time the # hash changes');
}

See more here: How to detect URL change in JavaScript

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Sep 19, 2015 at 12:40

AlexStack

17.5k22 gold badges78 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Call function on navigate with angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related