Example with ng-if vs ng-show

[beatelite]

I have server-side verification but I'd still like to use ng-if vs ng-show like your example.

in my $scope I have console.log(AclService.can('manage_content'));

This returns true and the <a ng-show="can('manage_content')">Edit</a> shows the hidden Edit button.

However, when I try <a ng-if="can('manage_content')">Edit</a> nothing shows.

I'm pretty sure I'm doing it correctly but can't get it to work. Any suggestions?

[mikemclin]

For visibility, ng-if and ng-show essentially do the same thing. The logic for one works in the other. ng-if just happens to remove the element from the DOM when the value is falsy, and ng-show adds a CSS display:none to the element when falsy.

So, if it is working on one, and not the other, then you have an error somewhere in your code. Is the ng-if right next to the ng-show element in the DOM? The only way I could think one is working in one, and not the other is because they are both utilizing different scopes (in other words, one is within your controller scope element, and one isn't).

[beatelite]

It looks like I need to post on your github page to figure out my own problems.

I needed to use <a ng-if="can == true ">Edit</a> since I was declaring $scope.can = AclService.can('manage_content'); in my controller.

Closing this out.

[mikemclin]

@beatelite

Personally, I would leave the word can for the method name, and not assign it as a data property (since it is so broad). If you want to assign a data property, I would be more explicit...

e.g.

$scope.canManageContent = AclService.can('manage_content');

Also, in your example, can is already storing a boolean. No need to have a comparison operator in the DOM. You could simply do: <a ng-if="can">Edit</a>. Or like I suggested, you would do <a ng-if="canManageContent">Edit</a>.

[beatelite]

Excellent! saved me some typing. Thank you!