Directive scope variable not working with ng-show

Question

I have a "home" controller that uses a directive. I want to be able to show/hide a button in the directive template depending on the value of a variable in the controller.

This is what my directive looks like:

angular.module("goleadoresApp").directive("golNavbar", [golNavbar]);
function golNavbar() {
    return {
        restrict: "EA",
        templateUrl: "views/templates/golNavbar.html",
        scope: {
            pageTitle: "@",
            showLockIcon: "@"
        }
    };
}

And my template:

<div class="bar bar-header bar-balanced">
     <h1 class="title">
         <i class="gol-logo-icon icon ion-ios-football"></i>
        <span ng-bind="pageTitle"></span>
     </h1>
     <!--For testing purposes: This variable renders as false, however, ng-show in line below doesn't work-->       
     {{showLockIcon}} 
     <!--ng-show won't work. Element would still be visible even if showLockIcon is false-->
     <a class="button icon ion-locked pull-right second-right-button" 
        ng-show="showLockIcon"></a>
     <a class="button icon ion-help-circled" href="#/help"></a>
</div>

From my view, I'll use the template and pass it a controller variable (canPredictionsBePosted) that holds a value of true or false, and for which I expect that, if true, button will show in the template:

<gol-navbar page-title="{{matchWeek}}"
            show-lock-icon="{{canPredictionsBePosted}}"">
</gol-navbar>

When running this code, I can actually see that the value passed to showLockIcon template variable is correct, but the element in the directive template, which has the ng-show, won't work. That means that when I pass it a value of false, the button is still visible.

Any ideas?

Furthermore, if I change the value of the canPredictionsBePosted variable in my home controller, the value of showLockIcon in the template doesn't get updated. How could I get this to work?

Thanks in advance, I'm new to directives, so all help is appreciated.

I've also tried using showLockIcon: "=", but then it seems like the template breaks, because instead of seeing the value of the variable in the {{showLockIcon}} line, I see just the text for than expression (curly braces included). — hugonne, Jul 20 '17 at 14:19
Using `=` is the correct approach. But, while doing so, you have to remove the curly braces around `{{showLockIcon}}` — CodeWarrior, Jul 20 '17 at 14:46

score 0 · Accepted Answer · answered Jul 20 '17 at 14:27

0

You need to make two changes.

1) Use = for showLockIcon like below:

    scope: {
        pageTitle: "@",
        showLockIcon: "="
    }

2) Remove the curly braces around canPredictionsBePosted in show-lock-icon="{{canPredictionsBePosted}}"

<gol-navbar page-title="{{matchWeek}}"
            show-lock-icon="canPredictionsBePosted">
</gol-navbar>

answered Jul 20 '17 at 14:27

CodeWarrior

2,721
3
18
18

That worked, just fine. Thanks a lot. Just to clarify: So, when using @ in the directive, I have to use {{ }} in the html attribute (to denote an expression instead of a string), but if I use =, I should just pass the expression. Is that correct? Is there a valid reasoning for that? It seems a little odd to me. Thanks for your help, anyway. – hugonne Jul 20 '17 at 15:23

Directive scope variable not working with ng-show

1 Answers1

Linked