ng-show / ng-hide / ng-if don't work on Angular directive

Question

I'm building a directive that takes the form of a card. When I load the card template I want to ensure that the card is hidden if a user has previously hid the card. I can track this via the request.hide attribute.

Here is my directive (barebones):

app.directive('request', ['$http', '$timeout', function($http, $timeout) {
    return {
        replace: true,
        templateUrl: '/assets/request.html',
        transclude: false,
        scope: {
            request: '='
        },
        controller: ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
            // Cool stuff goes in here
        }]
    };
}]);

And here is my template:

<div>
    <div ng-hide"request.hide" class="card">
        <!-- Cool stuff goes in here -->
    </div>
</div>

When the page loads, each request has a hide attribute. In theory, when I call my directive, it should be hidden if hide === true. Unfortunately this doesn't seem to be the case. No matter what I try, I cannot get my directive to be hidden when it's initialized. I've tried using ng-hide="request.hide", ng-show="!request.hide", and ng-if="!request.hide" on the root element, but nothing works.

I wondered to myself if these directives don't work on the root element of a custom directive, so I tried wrapping my directive in an additional div and using ng-hide, ng-show, or ng-if on the .card div, which is now a child element, but that had no effect either.

It seems as though ng-hide is either not being evaluated at all, or is being evaluated before request is defined on the directive's scope.

Answer 1

There's a small typo in the template markup you provided, missing an = sign after ng-hide. But I'm guessing that's just a typo while you were writing up the question.

Otherwise, the directive code looks fine, and it should work. You should double check the "request" object that you're binding the directive to, and make sure that the hide property is actually a boolean value, and not a string.

ng-if, ng-show, and ng-hide all set up watchers, so the issue shouldn't be that the expression gets evaluated before the scope is populated.

Just for testing purposes, try setting up a boolean on your scope in your directives controller, and do the hide or if against that.

Answer 2

Try using ngCloak on the wrapper-div. It should hide the div and its children as long as angular is still evaluating things.

https://docs.angularjs.org/api/ng/directive/ngCloak

edit: Actually, no. ngCloak doesn't work like I remembered. It hides the element and all its children, but only as long as it wasn't encountered in the compile phase - which is too early for my liking. You could write your own cloaking directive, though.

Here is ngCloak's source:

var ngCloakDirective = ngDirective({
  compile: function(element, attr) {
    attr.$set('ngCloak', undefined);
    element.removeClass('ng-cloak');
  }
});

You would need to mimic its behavior in the pre-/post-link phase.

Answer 3

ng-show can be unreliable.

<div>
    <div ng-show"!!request.hide" class="card">
        <!-- Cool stuff goes in here -->
    </div>
</div>

Answer 4

I finally came up with a solution to my problem, though I'd still like to know what caused the problem and the best way to address it.

I had a theory that ng-show/ng-hide/ng-if were not being evaluated when my directive was compiled, so I decided to use ng-hide="hide" on my directive's root element as before, but in my controller, rather than immediately set $scope.hide = $scope.request.hide, I decided to move this within a $timeout block with a delay of 10ms, like so:

$timeout(function() {
    $scope.hide = $scope.request.hide;
}, 10)

This triggers a digest cycle after the directive is compiled, causing ng-hide to be reevaluated. The delay is long enough for the directive to compile but short enough to be imperceptible to the user.