在嵌入元素内使用指令的隔离范围答案

【问题标题】：Using directive's isolated scope inside transcluded element在嵌入元素内使用指令的隔离范围
【发布时间】：2015-01-01 12:07:19
【问题描述】：

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

有没有一种干净的方式来通过它的嵌入元素使用我的指令的隔离范围？

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

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

如果我理解正确，你只需改为：

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

另外，您不需要obj 属性：

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

【讨论】：

我试图以最简单的方式重现我的问题。我为此道歉。例如，如果我必须将 dis.obj 传递给指令，因为它是某些方法的 API，该怎么办？

【解决方案2】：

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

取自源代码的sn-p：

.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，这就是我所说的完全控制:)

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

【讨论】：