How to use ng-show on a directive that has an isolated scope

Question

I have a directive that I use like this:

<dir model="data"></dir> 

The directive has an isolated scope.

scope :{   model:'=' } 

Now I'm trying to use ng-show on that directive using another attribute of my page's $scope, like this:

<dir ng-show="show" model="data"></dir> 

But it's not working because the directive is trying to find the show attribute on its own scope.

I don't want the directive to know about the fact that its container might choose to hide it.

The workaround I found is to wrap the directive in a <div> and apply ng-show on that element, but I don't like the extra element this forces me to use:

<div ng-show="show" >   <dir model="data"></dir>     </div> 

Is there a better way of doing this?

See this plunker: http://plnkr.co/edit/Q3MkWfl5mHssUeh3zXiR?p=preview

Answer 1

Update: This answer applies to Angular releases prior to 1.2. See @lex82's answer for Angular 1.2.

Because your dir directive creates an isolate scope, all directives defined on the same element (dir in this case) will use that isolate scope. This is why ng-show looks for property show on the isolate scope, rather than on the parent scope.

If your dir directive is truly a standalone/self-contained/reusable component, and therefore it should use an isolate scope, your wrapping solution is probably best (better than using $parent, IMO) because such directives should normally not be used with other directives on the same element (or you get exactly this kind of problem).

If your directive doesn't need an isolate scope, your problem goes away.

Answer 2

You could consider migrating to Angular 1.2 or higher. The isolate scope is now only exposed to directives with a scope property. This means the ng-show is not influenced by your directive anymore and you can write it exactly like you tried to do it in the first place:

<dir ng-show="show" model="data"></dir> 

@Angular-Developers: Great work, guys!