【问题标题】:AngularJS directive transclude scope=false?AngularJS指令包含范围=假?
【发布时间】: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;
}

【问题讨论】:

    标签: javascript html binding angularjs


    【解决方案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>
    

    【讨论】:

      猜你喜欢
      • 2014-11-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多