Why ng-hide doesn't work with custom directives?

Question

I'm reading the directives section of the developers guide on angularjs.org to refresh my knowledge and gain some insights and I was trying to run one of the examples but the directive ng-hide is not working on a custom directive.

Here the jsfiddle: http://jsfiddle.net/D3Nsk/:

<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
  Does Not Work Here!!!
</my-dialog>
<div ng-hide="dialogIsHidden">
       It works Here.
</div>

Any idea on why this is happening?

Solution

Seems that the variable dialogIsHidden on the tag already make a reference to a scope variable inside the directive and not to the variable in the controller; given that the directive has it's own insolated scope, to make this work it's necesary to pass by reference the variable dialogIsHidden of the controller to the directive.

Here the jsfiddle: http://jsfiddle.net/h7xvA/

changes at:

 <my-dialog 
     ng-hide="dialogIsHidden" 
     on-close="hideDialog()" dialog-is-hidden='dialogIsHidden'>

and:

  scope: {
    'close': '&onClose',
    'dialogIsHidden': '='
  },

Answer 1

You're creating an isolated scope inside your directive when asigning an object to scope. This is why $scope.dialogIsHidden is not passed through to the directive and thus the element is not being hided.

Kain's suggested adjustment for the fiddle with using $parent illustrates this.

Answer 2

your can change the

 <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">

to

 <my-dialog ng-hide="$parent.dialogIsHidden" on-close="hideDialog()">