Search code examples
javascriptangularjsanchor

Add spinner to anchor tag in Angular JS

I have a page a hyperlink (created using anchor tag) in Angular JS. When I click on the link I want to show a spinner until the content is loaded.

In list.html, I have declared the DIV tag as below:

<div id="loadScreen" class="load-screen" ng-show="displayLoader">
    <div class="loading-spinner"></div>
</div>

<div ng-if="isAccessible">
    <a href="https://www.google.com" ng-click="showLoader()">Click here</a>
</div>

In the controller, I have the following code:

    $scope.displayLoader = false;

    $scope.showLoader = function() {
        console.log("Inside showLoader....");
        $scope.displayLoader = true;
    };

The control never enters showLoader function. My initial goal is to at least hit this function and print the console log statement but I haven't been lucky so far.

I'm new to Angular JS and my project is already using v1.3 So I cannot change the version.

Please let me know how can I achieve this?

Thanks.

Solution

  • I changed my approach. Instead of adding the spinner to the hyperlink, I trigger it when loading the destination page. That works and seems to be the right way to do it.