7

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

对话指令的内容是嵌入的，因此它的范围是对话范围的兄弟：

来自 Angular js 文档：

然而，隔离作用域产生了一个新问题：如果一个嵌入的 DOM 是小部件隔离作用域的子对象，那么它将无法绑定到任何东西。由于这个原因，在小部件为其局部变量创建隔离范围之前，被嵌入的范围是原始范围的子级。这使得 transcluded 和 widget 隔离范围兄弟姐妹。

不过，这对我来说是一个新问题。被嵌入的 DOM 应该能够在应用时响应对话框。因此，我想在对话框上设置一个“应用”属性并让嵌入的 DOM 观看它。这是不可能的，因为他们是兄弟姐妹！

我哪里错了？

4

3 回答 3

13

我遇到了类似的事情，有两种方法（我知道）可以直接访问嵌入的范围。

第一种是在编译函数中自己创建作用域，然后将其与克隆链接函数一起传递给 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/。

于 2013-01-21T02:08:53.537 回答
0

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

此外，我可以让 sg-import 指令在应用对话框时通过在对话框上使用 a 来响应&property。当对话框被应用时，我让它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>
于 2013-01-22T17:49:03.793 回答
0

如果您愿意在共同祖先中创建一个模型来充当具有 $watch 目标的交换机，您可以使用预先存在的工具来使每个指令发生变异和/或监视该交换机模型。组件的访问模式和内容内容的控制器对每个范围都有两个 fery idfferent 调用签名，并且对于嵌入的情况有一个轻微的“陷阱”。

具有双向绑定的隔离范围

当注册指令的隔离作用域时，=attrName" 将导致检查名为 "attrName" 的 domainName 属性。Angular 将设置双向绑定，以便对任一作用域模型中的值的更改也会影响同级作用域中的模型.

例子

在控制器-parent.js 中：

module.controller( 'ParentController', function() {
    $scope.switchboard = { };
}

在指令-sg-dialogue.js

return {
    scope: {
  isolatedPeer: "=dialogModel"
};

...在指令元数据中...

<div ng-controller="ParentController">
    <sg-dialog dialog-model="switchboard">
        <div ng-controller="ChildController"></div>
    </sg-dialog>
</div>

...在某些应用程序视图模板中，并且...

$scope.switchboard = { isApplied: false }

...在绑定到应用程序视图模板的控制器中...

那么你们都准备好了...

$scope.$watch( 'switchboard.isApplied', function(newValue, oldValue) { })

...在共同祖先中，并在...之后获得回调

isolatedPeer.isApplied = true;

...在孤立的范围内。

原型继承

只要您没有在嵌入子项中显式设置 $scope.swtichboard，您就可以从被嵌入子项中的角度表达式访问“switchboard.isApplied”，并让插值引擎“找到”由父控制器在其自己的范围内。

例如，当配对对话框关闭时，将调用以下回调：

$scope.$watch( 'switchboard.isApplied', function(newValue, oldValue) { } );

这是可行的，因为被嵌入的孩子总是被赋予一个基本的范围，而不是一个孤立的范围。

希望这有帮助！

于 2013-05-29T13:54:30.247 回答