ng-show/ng-hide limit multiple calls

Question

I am trying to limit the call of ng-hide/ng-show. Currently, what it does is it calls the getLicense function multiple times that will overloads the browser.

$scope.getLicense = function( value ) {

    if( $sessionStorage.license === '' ) {
        DashboardService.getLicense( ).then( function( data ) {
            $scope.licenses = data;
            var arr = [ ],
                id = '';
            for( var i in $scope.licenses ) {
                arr.push( [ i ] );
            }
            $sessionStorage.license = arr;
        } );

        for( var cnt = 0; cnt < $sessionStorage.license.length; cnt++ ) {
            if( $sessionStorage.license[ cnt ] == value ) {
                console.log( 'true' );
                return true;
                break;
            } else {
                return false;
                break;
            }
        }
    } else {
            for( var cnt = 0; cnt < $sessionStorage.license.length; cnt++ ) {
            if( $sessionStorage.license[ cnt ] == value ) {
                console.log('true');
            return true;
                break;
            } else {
                console.log('false');
                return false;
                break;
            }
        }

    }

};

My HTML code looks like this:

   <md-list-item class="md-caption" ng-class="{'active': $state.includes('security.webcontrol')}" translate="SIDEBAR.NAV.WEBCONTROL.TITLE"  ng-hide="getLicense('web_control_da')">

Answer 1

Giving a function to ng-show / hide / if / etc is a very bad practice .

Each time $digest is called ( very often ) it check each watcher to see if it has changed. So it will have to execute your function to know if the result is different (or not).

Add a console.log('function executed') in your function getLicense and you will see how often it is called.

To avoid that (like Icycool explained) you have to replace that by a boolean in your scope. And only change the boolean when getLicense should be tested.

For example : If getLicense need to be calculated each time $sessionStorage.license change (for example) :

$scope.licence = getLicense();

$scope.watch("$sessionStorage.license", function (newValue, oldValue){
    $scope.licence = getLicense();
});

And in your view/template : ng-hide="licence"

So it will execute your getLicense only when it does really matter.

Answer 2

You can assign it to a scope variable and have ng-hide point to that instead. Call check license on other occasions.