4

我的目标是为可重用和轻量级的 UI 元素创建一组灵活的指令。每个都有一个孤立的范围，其中许多都包含内容。我希望每个指令都是一个黑盒子——理想情况下，用户在编写要嵌入的内容时不需要知道它是否在内部嵌套了另一个指令。

根据Angular 指令指南：

transclude 选项改变了范围嵌套的方式。它使得嵌入指令的内容具有指令外部的任何范围，而不是内部的任何范围。在这样做时，它使内容可以访问外部范围。

我发现这在使用单个指令时可以正常工作。但是，如果有另一个指令嵌套在该指令中，该指令也包含内容，那么被包含的内容将在外部指令的范围内解析，而不是在外部指令的范围内。这是一个问题，因为它使用户无法知道他们的嵌入内容将在什么范围内得到解决！

例如：（小提琴）

.controller('main', function ($scope) {
    $scope.value = '"main"';
    $scope.expected = $scope.value;
})

.directive('outer', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { expected:'=' },
        controller: function ($scope) {
            $scope.value = '"outer"';
        },
        template: '<div><inner expected="expected"><span ng-transclude></span></inner></div>'
    };
})

.directive('inner', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { expected:'=' },
        controller: function ($scope) {
            $scope.value = '"inner"';
        },
        template: '<div><span>\'value\' is expected to be resolved in scope {{expected}}, and is resolved in scope </span><span ng-transclude></span></div>'
    };
})

和 HTML：

<div ng-controller="main">
    <inner expected="value">
        <span>{{value}}</span>
    </inner>
    <hr/>
    <outer expected="value">
        <span>{{value}}</span>
    </outer>
</div>

<inner></inner>元素内部{{value}}在父范围内被评估为“main”（如预期的那样）。但是，内部<outer></outer>元素{{value}}在隔离范围内被评估outer为“外部”（不是预期的）。这样，指令的模板就可以影响到被嵌入的内容被解析的范围！

有没有办法解决这个问题？

4

2 回答 2

1

这真的很烂！Angular 只在孤立的范围内调用一个父级，如果它没有找到它需要的东西，它就会停止查找。要解决这个问题，您可以像这样手动调用范围的父级：

controller: function ($scope) {
    $scope.value = $scope.$parent.value || '"outer"';
}

这将“使”他看起来更上链。

于 2014-02-03T12:13:25.663 回答
0

经过一番修修补补，我找到了解决方案。我创建了两个新指令来替换 default ng-transcude，以及一个存储指令之间共享状态的辅助服务。它们一起实现了我正在寻找的深度嵌入。

第一个将 $transclude 存储到服务中；它必须在可以在模板中赋予可转换内容的每个指令中使用：

controller: ['$transclude', 'TransclusionHelper', function($transclude,TransclusionHelper) {
    TransclusionHelper.setTransclusionFn($transclude);
}],

第二个执行将内容嵌入到其最终位置；它不需要用在只将其嵌入内容传递给孩子的指令中：

link: ['$element','TransclusionHelper', function($element,TransclusionHelper) {
    TransclusionHelper.transclude(function(clone) {
        $element.empty();
        $element.append(clone);
    });
}],

服务中需要一些技巧来管理状态；setTransclusionFn如果在调用 to之前多次调用 to ，则在调用transcludetransclude 时只应存储和使用第一个。

于 2014-02-03T21:54:10.063 回答