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?

Thanks.

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': '='
  },