The functionality of Ng-Show is acting up

$scope.stay = function() {
    alert("Inside Keep me In")
    $scope.timed = false;
    $scope.isLogStatus = true;
}

$scope.displayAlert = function() {
    $scope.timed = true;
    alert("inside display")
}

function idleTimer() {
    var t;
    $window.onmousemove = resetTimer; // catches mouse movements
    $window.onmousedown = resetTimer; // catches mouse movements
    $window.onclick = resetTimer; // catches mouse clicks
    $window.onscroll = resetTimer;

    function logout() {
        $scope.displayAlert();
        alert('insinde logout');
    }

    function reload() {
        $window.location = self.location.href; //Reloads the current page
    }

    function resetTimer() {
        alert("timer reset")
        clearTimeout(t);
        $timeout(function() {
            alert("timout triggered");
            $scope.displayAlert();
        }, 9000); 
    }
}
idleTimer();

I have an html element above and by default if I set

$scope.timed=true;

it's working. However, when I click on "logged in" I am setting

 $scope.timed=false;

and if the time exceeds 10 minutes, I'm setting

$scope.timed=true;

(which is not triggering ng-show). As a result, the show functionality is not working as expected.

This is what is happening in the controller:

$scope.stay = function() {
    alert("Inside Keep me In")
    $scope.timed = false;
    $scope.isLogStatus = true;
}

$scope.displayAlert = function() {
    $scope.timed = true;
    alert("inside display")

}

function idleTimer() {
    var t;

    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;
    window.onclick = resetTimer;
    window.onscroll = resetTimer;

    function logout() {
        $scope.displayAlert();
        alert('insinde logout');
    }

    function reload() {
        window.location = self.location.href;
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(logout, 9000);
    }
}
idleTimer();
// Get the topbar menu
$scope.menu = Menus.getMenu('topbar');

Answer №1

Your issue lies in how you are invoking the logout function. The problem arises when you call it from outside the angular framework, preventing Angular from running the necessary digest cycle. Consequently, any modifications made to the scope will not be reflected in the view.

To confirm this, consider encapsulating the code within the logout function using $timeout, ensuring that it has been included in the list of dependencies.

$timeout(function(){
   $scope.displayAlert();
});

It is recommended to utilize angular wrappers such as $window for window operations and $timeout for setTimeout functions. This way, Angular can effectively monitor these changes and trigger the digest cycle accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aborting HTTP POST requests in IE due to error code 0x2ee2

Currently, I am utilizing angularjs for file uploads to my API. The page features a multi-file select option where users can choose one or multiple files. Upon selection, the page initiates calls to the api and uploads each file individually using requests ...

Is it possible to adjust the color of this AnchorLink as I scroll down?

Currently struggling to update the color of a logo as I scroll. While the navigation bar successfully changes colors, the logo remains stagnant. Here is the excerpt from my existing code: navigation.js return ( <Nav {...this.props} scrolled={this ...

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

Seamless Shift: Effortless Transition

I'm attempting to develop a unique hover effect for a button. Initially, the button only displays an outline and its name inside. However, upon hovering over the button, I want it to smoothly transition to my gradient background. Despite trying multip ...

Secure your Flask forms with CSRF token validation middleware

I'm handling an html form and want to make sure that all submissions originate from my website. I've noticed others using a key for this in Django, and I'm considering implementing something similar. Is there a recommended approach for achie ...

What is preventing the text of the elements from being updated?

My attempt to use JavaScript to change the text of this element has not been successful. The header I am trying to modify is enter image description here var elem = document.getElementsByClassName("headertext"); elem.innerHTML = "hello world"; <ul cl ...

Leverage TypeScript with AngularJS to validate interpolation and binding within HTML documents

While TypeScript can detect compile errors for *.ts files, the question arises if these benefits can be extended to AngularJS views/templates. Consider a scenario where the code snippet below is present: <div ng-controller="HomeController as home"> ...

The lack of search results on Google Custom Search could be due to issues with META tags

I have a website and I've successfully integrated Google Custom Search following all the provided instructions. Although I indexed my site three months ago, the custom search still shows no results. Even after adding sitemap.xml, there has been no i ...

Getting variables from different functions in Python can be achieved by using the return

I am trying to implement a feature where I can fetch a search term from the function getRandomVideo() and then use it in a jQuery statement. For example, if I get "Beethoven" as the search term from the variable searches, I want to use it to retrieve JS ...

Can CSS be used to separate elements within a div from the overall page styles, similar to how an iFrame functions?

Is there a way to isolate elements within a div, similar to how it would behave in an iFrame? I am facing issues with the global SharePoint styles affecting my app inside SharePoint. I want to completely disable these global styles so that my app only use ...

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

Using animation.width() in Javascript to create a countdown

Currently, I am working on creating a visual countdown for my users to indicate when an animation will finish. The code snippet below shows my initial attempt: function setClassAndFire(){ timer = setInterval(function () { t--; ...

Angular styling for input elements that are in the pristine state

Hey there, I'm working with a CSS class that applies a red border to an input field when it is required and invalid, and changes to green when it becomes valid. CSS .ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green ...

Issues with Google fonts not displaying properly on WordPress site

I'm just starting out with Wordpress and I'm using the html5blank theme to bring in my stylesheets. However, I've run into an issue where the google fonts are not being applied on my wordpress site. In my header.php file, I have included th ...

Having trouble with the Angular Material datepicker component?

I have recently started learning angularjs and decided to utilize the angularjs material datepicker component to manage dates in my project. However, I seem to be encountering some issues as the control is not displaying properly on my DatePicker.html page ...

Whenever I attempt to display certain HTML files in Django, I encounter an error message stating: "NoReverseMatch at / Reverse for 'it_languages' not found."

Every time I attempt to display a HTML file in my Django project, an error pops up preventing me from accessing the localhost page. The exact error message I receive is: The error is: NoReverseMatch at / Reverse for 'it_languages' not found. &apo ...

Discover the interactive world of HTML5 Canvas on iPhone with exciting highlights triggered by touchstart or mousedown

The canvas changes to a darker color when touched and held, reverting back to normal when the touch is released. This effect is similar to how hyperlinks are highlighted on an iPhone, not like text selection. To implement this feature, I am using jQuery t ...

Displaying text on an image when hovering over it

I have tried various solutions that I came across, but none of them have been successful so far. My goal is to display dynamic text over an image when the user hovers over it. Additionally, I would like to change the hover color. Currently, the text is alw ...

ensuring the footer is correctly aligned

<div id="footer"> <div class="row"> <div class="span5"> <img src="../goyal/webdesign.jpg" class="verisign-image"></div> I am a <select style="width:10%;" class="dro ...

Adjust the autofocus to activate once the select option has been chosen

Is there a way to automatically move the cursor after selecting an option from a form select? <select name="id" class="form-control"> <option>1</option> <option>2</option> <option>3</option&g ...