How to display a button when entering a page for the first time only?

Question

I am using AngularJS, HTML, Javascript and Ionic to figure out the correct means to display a message to a user when they enter a specific page in the app for the first time. This message should not be displayed thereafter.

I am currently using a button to display the message and using ng-show to check for a 'first time' flag; this flag is to be stored locally as a boolean 'true' or 'false' value and I am using window.localStorage to do so. I would like to know if this approach is correct and if it is then, the code snippet for the first time flag which exists within my controller looks like this:

$scope.getFT = function(){                      
    return window.localStorage['firstTime'] || 0;
};

$scope.setFT = function(value){
    window.localStorage['firstTime'] = 1;                       
};

$scope.checkFT = function(){
    // Checks whether or not this is the first time (FT) the user entered this page
    if(($scope.getFT() === 0 || $scope.getFT() === 'undefined')
    {// This is the first time navigating in this page, show message & set local flag to true
        console.log("checkFT: true, value of FT: " + window.localStorage['FT'] + ', now setting FT to true');
        $scope.setFT(1);
        return true;
    }
    else
    {// Not first time navigating through here, do not show first time message
        console.log("checkFT: false, value of FT: " + window.localStorage['FT']);
        return false;
    }
};

On my page I have the following button with more code below, like so:

<ion-header-bar>
    <!-- some code here -->
<ion-header-bar>

<ion-content>
    <!-- First Time Button -->
    <button ng-show='checkFT()' class="firstTime">
        <img src=".../img/firstTimeImage.png"/>
    </button>

    </ion-scroll>
        <ion-list ng-repeat="i in array">
        <!-- . . . . more code below . . . . -->
        </ion-list>
    </ion-scroll>

</ion-content>

On my debug window I see that my app identifies that this is the first time I enter the page, but for some reason the function is called about 9 times before the page finishes loading. It is not in a loop of any kind, I do have code logic for a list of elements below however that list is independent of the button and vice versa.

That is why I am wondering, what am I doing wrong here exactly? Is my logic simply incorrect, is my approach entirely wrong, or am I right and I am simply dealing with browser loading multiple times on me?

Answer 1

您可以创建工厂/服务并设置标志以检查其是否为首次访问。