AngularJS directive transclude scope=false?

Question

How to prevent directive with transclude to create new scopes?

This jsfiddle I cant bind anything due to the new scopes illustrated with red borders.

Html:

<div ng-app="components">
    <input ng-model="var">
    <block>
        123
        <input ng-model="var">
    </block>
</div>

JavaScript:

angular.module('components', []).directive('block',function(){
    return{
        scope:false,
        replace:true,
        restrict:"E",
        transclude:true,
        template:'<div class="block" ng-transclude></div>',
        link:function(scope, el, attrs, ctrl){

        }
    }
});

CSS:

.ng-scope{
  border:1px solid red;
    margin:10px;
}

Guillaume86 · Accepted Answer · 2012-09-27 20:56:09Z

7

It is actually expected behavior as stated here (ng-transclude create a child scope): https://github.com/angular/angular.js/issues/1056 and discussed here: https://groups.google.com/forum/#!msg/angular/45jNmQucSCE/hL8x48-JfZIJ

You can workaround this by setting a member on an object in the scope (obj.var) like in this fiddle: http://jsfiddle.net/rdarder/pnSNj/10/

edited Sep 27, 2012 at 20:56

answered Sep 27, 2012 at 20:48

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jossi Over a year ago

Thanks. I made a more simple example jsfiddle.But is that a bug or is it a feature?

Guillaume86 Over a year ago

It's normal behavior for child scopes (they inherit by prototype from the parent scope, meaning that you can read from the parent scope, but as soon as you write, it's on the child scope - unless you use the obj on the parent scope workaroud), you could perhaps take a look at the source code of the ng-transclude directive, copy it and make your own with a scope: false option.

Kushagra Gour Over a year ago

The issues comes up again if I start using transclude set as element. Does anyone have any idea why it doesn't work now. Demo: plnkr.co/edit/Bv1kFQtzdVzsasHTUrgf?p=preview

soote Over a year ago

Why does setting a member on an object get around the fact that the nested template has it's own scope?

soote Over a year ago

More clearly, how does the nested template have access to the parent scope without calling $scope.$parent?

|

Anson Kao · Accepted Answer · 2015-03-17 14:40:16Z

0

Although this is not recommended by the Angular team, another workaround is to explicitly call the $parent scope within the transcluded portion:

<div ng-app="components">
    <input ng-model="var">
    <block>
        123
        <input ng-model="$parent.var">
    </block>
</div>

edited Mar 17, 2015 at 14:40

answered Mar 17, 2015 at 13:58

Anson Kao

5,3954 gold badges31 silver badges39 bronze badges

Collectives™ on Stack Overflow

AngularJS directive transclude scope=false?

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related