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.