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="ponents">
    <input ng-model="var">
    <block>
        123
        <input ng-model="var">
    </block>
</div>

JavaScript:

angular.module('ponents', []).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;
}

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="ponents">
    <input ng-model="var">
    <block>
        123
        <input ng-model="var">
    </block>
</div>

JavaScript:

angular.module('ponents', []).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;
}

• javascript
• html
• binding
• angularjs

2 Answers 2

It is actually expected behavior as stated here (ng-transclude create a child scope): https://github./angular/angular.js/issues/1056 and discussed here: https://groups.google./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/rdarder/pnSNj/10/

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

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