0

I am facing is an issue which is demonstrated in the 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 to create a directive (myWrapperDirective) which will wrap many other directives such as 'myNestedDirective of my example. 'myWrapperDirective' should decide if its content will be displayed or not according to ng-if expression's value, but if contents is a directive like 'myNestedDirective' with an isolated scope then scope variable 'nestedData' of 'myNestedDirective' is undefined.

1 Answer 1

1

The problem is with the double-nested isolated scopes. You see, you are using the nameForNestedDirective variable, defined in the outer scope from the inner scope which is isolated. This means it does not inherit this variable, thus undefined is passed to the nested directive.

A diagram to explain:

Outer scope - DemoCtrl
    - Defines: name
    - Defines: nameForNestedDirective
    + Uses: name

    Inner isolated scope 1 - myWrapperDirective
        - Defines: (nothing)
        - Inherits: (NOTHING! - It is isolated)
        + Uses: (nothing)
        * Passes nestedData=nameForNestedDirective to nested directive, but
          nameForNestedDirective is undefined here!

        Inner isolated scope 2 - myNestedDirective
            - Defines: nestedData (from scope definition)
            - Inherits: (NOTHING! - It is isolated)
            + Uses nestedData

You can convince yourself this is the case by commenting out the scope definition of the wrapper directive ("hello eirini" is displayed as expected):

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

I am not sure if the wrapper directive really needs to have an isolated scope. If it doesn't, maybe removing the isolated scope will solve your problem. Otherwise you will have either to:

  1. Pass the data first to the wrapper and then to the nested directives
  2. Pass the data to the wrapper directive, write a controller for it that exposes the data and then require the wrapper controller from the nested directive.
3
  • Unfortunately isolated scope of wrapper directive is needed, because i would like to keep value of 'isEnabled' variable, which will vary for every occurence of wrapper directive probable inside the same controller, so if we hadn't an isolated scope, 'isEnabled' value could be the same for all occurences of wrapper directive. Mar 11, 2014 at 0:10
  • For the isolated scope case you can "bundle" all the data required by the inner directives in a JS object from the top-level controller and pass that object to the wrapper. Mar 11, 2014 at 9:04
  • In that case, you could use scope: true which will give each instance of the directive its own clone of the parent (DemoCtrl) scope. Remember though that it is a clone so changes in the parent scope will not affect the content. If you need it to be bindable, then you should pass it as an attribute on your wrapper (and include that attribute in your isolate scope).
    – plong0
    Feb 19, 2016 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.