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, Sep 19 '15 at 12:37
Oh ok. Thanks. I'm still new to angular. I'll check that out. — Jeff, Sep 19 '15 at 12:40

score 1 · Accepted Answer · edited May 23 '17 at 12:14

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 '17 at 12:14

Community

1
1

answered Sep 19 '15 at 12:40

AlexStack

16,766
21
72
104

Call function on navigate with angular

1 Answers1