ng-if, ng-show or custom directive? Advice on best practice

Question

I'm fairly new to angular so apologies if this is a noob question. Within my small Ionic/Angular app I have a situation where I need to display only 1 of 3 buttons depending on some basic logic. Currently I'm going this in my controller:

if ($scope.book.borrowedBy == $rootScope.signedInUser.email) {
    $scope.mode = 'return';
} else if ($scope.book.borrowedBy) {
    $scope.mode = 'request';
} else {
    $scope.mode = 'borrow';
}

$scope.borrow = function() {
    $scope.book.borrowedBy = $rootScope.signedInUser.email;
    $scope.book.$save();
    $scope.mode = 'return';
}

$scope.return = function() {
    $scope.book.borrowedBy = null;
    $scope.book.$save();
    $scope.mode = 'borrow';
}

and this in my view partial:

    <a href="mailto:{{book.borrowedBy}}" ng-show="mode === 'request'" class="button button-block button-positive">
        Request book
    </a>

    <button ng-show="mode === 'return'" class="button button-block button-positive" ng-click="return()">
        Return book
    </button>

    <button ng-show="mode === 'borrow'" class="button button-block button-positive" ng-click="borrow()">
        Borrow book
    </button>

Whilst this works it feels messy as hell. According to best practices, should this be in a directive? Or perhaps I should use ng-if?

Is it possible to output different template code based on conditionals from within a directive (I've only created very basic ones so far)?

If it should be a directive, would someone be able to give me an example of similar behaviour as a starting point?

Thanks in advance

I think I would use an ngclass expression in the partial. You could really compress it. http://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional — Thomas Sobieck, Jul 31 '14 at 18:12
I wrote [a blog post](https://terry.silvrback.com/when-to-use-ng-if-and-ng-show-hide) that helps clear up some confusion on `ngShow/ngHide` vs. `ngIf`. Maybe it will help you. — Terry, Jul 31 '14 at 18:56

score 1 · Answer 1 · answered Jul 31 '14 at 18:25

1

I would take a look at ngSwitch. https://code.angularjs.org/1.2.21/docs/api/ng/directive/ngSwitch

answered Jul 31 '14 at 18:25

simonsays

11
2

Sten Muchow · Answer 2 · 2014-07-31T18:27:44.993

Your code aside what you should keep in mind when using either of these two directives ng-show/ng-hide vs ng-if is do you want the html to be in the DOM or not?

ng-if will actually remove the node from the DOM tree so its not available to anyone in the dev tools.
ng-show/ng-hide will simply use css display:none to remove to item from visibility of the user.
Custom Directive why reinvent the wheel? If you simply need to show/hide or remove DOM nodes then angular has already done this for you - use their out of the box solution. If you need really special logic that this doesnt solve then you should write your own directive.

So... its really dependant on your situation. You have to ask yourself do i want someone to be able to open the dev tool and unclick display none and then have full access to the logic that was being hidden or is it just not a concern. If you answer no to this as in I DON'T want the user to have access to the logic then your choice is simple - ng-if and remove the node from the DOM entirely.

Taking your code into account this is more along the lines of what you want - an object of booleans for these choices.

Controller ex:

$scope.mode = {
   return: true,
   request: false,
   borrow: false
}

HTML ex:

<button ng-show="mode.return" class="button button-block button-positive" ng-click="return()">
    Return book
</button>

ng-if, ng-show or custom directive? Advice on best practice

2 Answers2