angularjs transclusion scope access

Question

我已经设置了一个带有标题和应用/取消按钮的通用对话框指令.该对话框具有独立的范围.

对话框指令的内容被转换,因此它的范围是对话框范围的兄弟:

来自Angular js docs:

但是,隔离范围会产生一个新问题:如果转换的DOM是小部件隔离范围的子级,则它将无法绑定到任何内容.因此,在窗口小部件为其局部变量创建隔离范围之前,转换范围是原始范围的子级.这使得transcluded和widget隔离范围的兄弟姐妹.

这给我带来了一个新问题.转换后的DOM应该能够在应用时响应对话框.因此,我想在对话框上设置一个"应用"属性,让被抄袭的DOM观看它.但这是不可能的,因为他们是兄弟姐妹!

我哪里错了？

Answer 1

我遇到了类似的东西,有两种方式(我知道)直接访问transcluded范围.

第一种是在编译函数中自己创建作用域,然后将其与克隆链接函数一起传递给transclude链接函数:

function compileFn(tElement, tAttrs, transclude) {
    return linkFn;
    function linkFn(scope, element, attrs) {
        scope = scope.$new();
        scope.name = attrs.works1;
        transclude(scope, function(clone) {
            element.find('div').append(clone);
        });
    };
}

第二种是创建一个控制器并注入预先绑定到新范围的$ transclude服务.您的克隆链接函数将接收新范围作为其第二个参数:

function Controller($element, $attrs, $transclude) {
    $transclude(function(clone, scope) {
        scope.name = $attrs.works2;
        $element.find('div').append(clone);
    });
}

在这两种情况下,您都必须提供克隆链接功能以自行进行转换,而不是使用ngTransclude.

有关两者的示例,请参见http://jsfiddle.net/dbinit/wQC7G/6/.

Answer 2

好吧，我想我已经找到了解决方案。我已将实际对话框包装在定义对话框范围的指令中。对话框的内容仍然嵌入在对话框中，但由于它将从parent of the dialog(!!) 获取其父范围而不是对话框本身（嵌入以这种方式工作），因此这会很好地工作。

&property此外，当通过在对话框上使用 a 应用对话框时，我可以让 sg-import 指令做出响应。应用对话框时，我让它sg-apply在父作用域的上下文中评估该函数（作用域是自动完成的，我只需从控制器的 apply() 函数调用该方法）。

<div sg-import>
    <div 
        sg-dialog title="Import Photographs" 
        visible="show_import_dialog" 
        sg-apply="upload()"
    >
        <div class="drop-zone">
            <div sg-photo title="{{ file.name }}">
            </div>
            <input type="file" multiple />
        </div>
    </div>
</div>