ngShow in directive with isolate scope is never shown

[arunjitsingh]

In a directive with an isolate scope with ng-show="someVar" (someVar from a parent ng-controller's $scope), the directive's tag is never shown ("display: none" isn't removed) (example). Other directives (like ng-repeat) bind values correctly in custom directives with isolate scope.

[chrisnicola]

If I had to guess exactly the problem it's because you have an isolate scope so it expects that ng-show will be bound inside the directive template and not outside of it.

So as a quick-fix the following works if you put it inside your directive template instead:

template: '<div class="item" ng-transclude ng-show="list.length"></div>'

However the whole point of the isolate scope is to isolate yourself from any direct bindings to the parent scope and instead pass them in. So arguably you should have something more like:

scope: { show: '=' }
template: '<div class="item" ng-transclude ng-show="show"></div>'

// And in the HTML call it like this:

<div my-directive show="list.length">

As for why ng-repeat is working fine, if I had to hazard another guess it is because it is part of the transclusion step. Since you are transcluding inside myDirective it needs to determining what content to transclude in advance. Thus ng-repeat is not happening inside the directive scope but outside of it before being injected into the template through the transclusion step.

I do agree the behaviour is a bit non-intuitive, and I wonder if it wouldn't be better to ensure that binding to the parent scope always "just worked" regardless of an isolate scope or not. As a rule of thumb I try to design my directives to be completely ignorante (isolated) from the controller/scope that contains them. If necessary I'll write a controller inside the directive itself to manage the internal state of the directive.

[shairez]

Agree, especially when you have multiple nested components, where you have to declare the "show" property on each one of them...

So maybe when angular see an element directives with attribute directives, it should transclude just them..

Something like:

<my-panel ng-show="someVar"></my-panel>

Before my-panel's template is compiled, it should transclude the other attributes on the HTML declaration.

Is that possible?

[robinboehm]

"I do agree the behaviour is a bit non-intuitive"
Me too, that dont feels right.
I understand the technical background, but for from the developers point of view it should be possible.

There is also a Google Group for this:
https://groups.google.com/forum/#!msg/angular/FqvC0ciG08w/k7KkyJu7zNoJ

Lets find a solution...

[0x-r4bbit]

@shairez Unfortunately in that case, you have to wrap it in a div which has the ng-show directive.

[tam4s]

+1 to support ng-show on custom directives with isolated scope

[gaevoy]

+1 It would be helpful somewhat declare inside directive statement that you want to use ng-show ng-hide on it.

[jrencz]

+1

[keir]

+1; I just ran into this.

[kevinsbennett]

+1... I don't think anybody placing attribute expressions on an element directive (at the point of use) is wanting them to run in the context of the isolate scope.

[jyboudreau]

+1

[amorphius]

+1

[jim-cooper]

+1

[rob-balfre]

+1

[scamden]

seems unnecessary to mention but i also would intuitively expect the isolate scope not to affect the other directives

[arvearve]

👍