javascript - AngularJS指令包含范围=假？

Question

如何使用 transclude 防止指令创建新范围？

这个jsfiddle由于带有红色边框的新范围，我无法绑定任何东西。

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;
}

Answer 1

它实际上是此处所述的预期行为（ng-transclude 创建子范围）：https ://github.com/angular/angular.js/issues/1056 并在此处讨论：https ://groups.google.com/forum /#!msg/angular/45jNmQucSCE/hL8x48-JfZIJ

您可以通过在范围内的对象（obj.var）上设置成员来解决此问题，就像在这个小提琴中一样：http: //jsfiddle.net/rdarder/pnSNj/10/

Answer 2

尽管 Angular 团队不建议这样做，但另一种解决方法是在嵌入部分中显式调用 $parent 范围：

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