Question

我在我的指令中使用controllerAs语法。在我的一些研究（以及一些扫描文档）之后的理解中，transclude d元素似乎没有继承隔离范围，因为ng-transclude只是在指令之后附加元素（作为兄弟，例如地址）在this question）。

是否有 clean 方法通过其transcluded元素使用我的指令的隔离范围？

这是一个plunkr用于演示目的。

Answer 1

如果我理解正确，您只需要更改为：

<that obj="dis.obj">
    ThatCtrl: {{ dis.obj }}
</that>

此外，您不需要obj属性：

<that>ThatCtrl: {{ dis.obj }}</that>

Answer 2

最简洁的方法是使用指令的transclude函数中的link参数，如here (Transclusions and Scopes by Jesus Rodriguez所述。

摘自来源的片段：

.directive('person', function() {
    return {
        restrict: 'EA',
        scope: {
            header: '='
        },
        transclude:true,
        link: function(scope, element, attrs, ctrl, transclude) {
            scope.person = {
                name: 'Directive Joe',
                profession: 'Scope guy'
            };

            scope.header = 'Directive\'s header';
            transclude(scope, function(clone, scope) {
                element.append(clone);
            });
        }
    };
});

transclude函数接收函数和可选的第一个参数。这个函数的作用是克隆被转换的html，然后你可以用它做你想要的。如果将作用域作为第一个参数，则该作用域将是克隆元素上使用的作用域。 transclude的回调函数将接收克隆的DOM以及附加的范围。

在这种情况下，我们使用指令的父作用域（在本例中是控制器的作用域）作为被转换的html的作用域，然后我们在回调函数中接收它。我们在这里做的只是将它附加到我们的指令的DOM元素上。在我们在指令上有一个模板的情况下，我们可以检索一个DOM元素，然后使用它来附加被转换的html，这就是我所谓的完全控制：）

此外，transclude d元素被附加到指令，继承父代$scope而不是指令。可以找到更多信息here

在transcluded元素内使用指令的隔离范围

2 个答案: