angularjs - Directive's isolated scope variables are undefined if it is wrapped in a directive which has in its template ng-if and tranclusion enabled -

i facing issue demonstrated in following example:

http://jsfiddle.net/nanmark/xm92p/

<div ng-controller="democtrl">   hello, {{name}}!     <div my-wrapper-directive>         <div my-nested-directive nested-data="namefornesteddirective"></div>      </div> </div>  var myapp = angular.module('myapp', []); myapp.controller('democtrl',['$scope', function($scope){     $scope.name = 'nadia';     $scope.namefornesteddirective = 'eirini'; }]) .directive('mywrapperdirective', function(){     return {         restrict: 'a',         scope: {},         transclude: true,         template: "<div ng-if='isenabled'>hello, <div ng-transclude></div></div>",         link: function(scope, element){             scope.isenabled = true;         }     } }) .directive('mynesteddirective', function(){     return {         restrict: 'a',         scope: {             nesteddata: '='         },         template: '<div>{{nesteddata}}</div>',      };  }); 

i want create directive (mywrapperdirective) wrap many other directives such 'mynesteddirective of example. 'mywrapperdirective' should decide if content displayed or not according ng-if expression's value, if contents directive 'mynesteddirective' isolated scope scope variable 'nesteddata' of 'mynesteddirective' undefined.

the problem double-nested isolated scopes. see, using namefornesteddirective variable, defined in outer scope inner scope isolated. means not inherit variable, undefined passed nested directive.

a diagram explain:

outer scope - democtrl     - defines: name     - defines: namefornesteddirective     + uses: name      inner isolated scope 1 - mywrapperdirective         - defines: (nothing)         - inherits: (nothing! - isolated)         + uses: (nothing)         * passes nesteddata=namefornesteddirective nested directive,           namefornesteddirective undefined here!          inner isolated scope 2 - mynesteddirective             - defines: nesteddata (from scope definition)             - inherits: (nothing! - isolated)             + uses nesteddata 

you can convince case commenting out scope definition of wrapper directive ("hello eirini" displayed expected):

.directive('mywrapperdirective', function(){     return {         ...         //scope: {},         ... 

i not sure if wrapper directive needs have isolated scope. if doesn't, maybe removing isolated scope solve problem. otherwise have either to:

1. pass data first wrapper , nested directives
2. pass data wrapper directive, write controller exposes data , require wrapper controller nested directive.