AngularJS指令包含范围=假？

Posted 2023-02-23

【中文标题】AngularJS指令包含范围=假？

【英文标题】：AngularJS directive transclude scope=false?

【发布时间】：2012-09-19 16:44:38

【问题描述】：

如何防止指令与 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;

【参考方案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/

【讨论】：

谢谢。我做了一个更简单的例子jsfiddle。但是这是一个错误还是一个功能？

这是子作用域的正常行为（它们通过原型从父作用域继承，这意味着您可以从父作用域读取，但是一旦您写入，它就在子作用域上 - 除非您使用父作用域上的 obj 工作），您也许可以查看 ng-transclude 指令的源代码，复制它并使用 scope: false 选项制作自己的代码。

如果我开始使用 transclude 设置为 element，问题会再次出现。有谁知道为什么它现在不起作用。演示：plnkr.co/edit/Bv1kFQtzdVzsasHTUrgf?p=preview

为什么在对象上设置成员会绕过嵌套模板有自己的范围这一事实？

更清楚一点，嵌套模板如何在不调用$scope.$parent的情况下访问父范围？

【参考方案2】：

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

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