user7322961
user7322961

Reputation: 31

AngularJS Boolean Function not Affecting ng-show

I have two divs:

<div ng-show="!function(necessaryPrivilege)">Need privilege</div>
<div ng-show="function(necessaryPrivilege)">Have privilege</div>

and two users I am testing with:

User1: has necessaryPrivilege User2: does not have necessaryPrivilege

I have put console.log at various points in my function to ensure it is returning the proper values, however for both users it is showing the "Need privileges" div. Does anyone have any idea why it would do this? I know for a fact with user1 the function returns true, and for user2 it returns false.

Edit, functions:

$scope.getReqPriv = function(page, section, action) //this is the function called by ng-show
{
    //TO-DO

    for(var i = 0; i < $scope.elemPrivs.length; i++)
    {
        console.log("Priv Array");
        console.log($scope.elemPrivs["elementPrivilegesJSON"]);
    }

    angular.forEach($scope.elemPrivs, function(data, name)
    {
        if(name === page)
        {
            console.log(name === page);
            angular.forEach(data[0], function(data1, name1)
            {
                if(name1 === section)
                {
                    console.log(name1 === section);
                    angular.forEach(data1, function(data2, name2)
                    {
                        if(name2 === action)
                        {
                            console.log(name2 === action); //printing true for user1
                            return $scope.checkPrivileges(data2);
                        }
                    });
                }
            });
        }
    });
}

$scope.checkPrivileges = function(reqPriv)
{
    console.log("CHECK YOUR PRIVILEGE!");
    for(var i = 0; i < $scope.userPrivs.length; i++)
    {
            if(reqPriv === $scope.userPrivs[i])
            {
                console.log(reqPriv === $scope.userPrivs[i]);
            }

        if(reqPriv === $scope.userPrivs[i])
        {
            console.log("YOU HAVE PRIVILEGE!"); //this is printing for user1
            return true;
        }
    }

    return false;
}

Unfortunately this is the best I can give you. The rest is proprietary from my employer, but I can 100% assure you that the data is correct. The problem arises when it reaches the ng-show in the dom element.

UPDATE:

So I got tired of try to debug such a complicated mess and instead did this:

<div ng-show="!checkPrivs()">Need privilege</div>
<div ng-show="checkPrivs()">Have privilege</div>

Where

$scope.checkPrivs - function()
{
    return true;
}

And I just changed true to fals and vice versa....it still didn't change the ng-show in the div tag. Something is definitely happening between the JS and the DOM. I have ensured that the function is within my controller in the javascript file, and made sure that the DOM element is within the controller in the HTML file.

FINAL UPDATE, IT'S FIXED:

Yes, I already realize in my previous update I put "- function()" instead "= function", hence why it didn't work. Now, on to the solution:

It refuses to work with the nested functions! If you notice that the ng-show calls a function, which gets a result and uses that result to call another function, which returns a boolean and the first function returns the result of the second function. Now that I write it out, I realize how dumb that was to do, as there was no need to add a second function.

Thank you for everyone's help!

Upvotes: 1

Views: 1202

Answers (4)

user7322961
user7322961

Reputation: 31

It refuses to work with the nested functions! If you notice that the ng-show calls a function, which gets a result and uses that result to call another function, which returns a boolean and the first function returns the result of the second function. Now that I write it out, I realize how dumb that was to do, as there was no need to add a second function.

So basically I merged the second function into the first and bada-boom it works.

Thank you for everyone's help!

Upvotes: 0

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27232

Some observations :

  • function call should be proper inside ng-show. Instead of using function(necessaryPrivilege) use this checkPrivileges(necessaryPrivilege).

Working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.checkPrivileges = function(necessaryPrivilege) {
      // add functionality here
      return true;
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-show="!checkPrivileges(necessaryPrivilege)">Need privilege</div>
    <div ng-show="checkPrivileges(necessaryPrivilege)">Have privilege</div>
</div>

Upvotes: 0

SamD
SamD

Reputation: 130

From my experience, I come across such scenarios when I fail to return boolean values from the validator methods. Can you please ensure that the function returns true/ false and not 'true'/'false'

Upvotes: 0

JVM
JVM

Reputation: 994

With ng-show, you should use a scope variable instead of method and set the variable inside the controller method.

Upvotes: 0

Related Questions