Question

最好用几个小提琴解释。我在两者中使用这些简单的指令：

var demo = angular.module('demo', []);

demo.directive('redBox', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div class="bg-red size-med"><b>I am inside a red box.</b><div ng-transclude></div></div>'
    }
});

demo.directive('blueBox', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div class="bg-blue size-med"><b>I am inside a blue box.</b><div ng-transclude></div></div>'
    }
});

function MyCtrl ($scope) {  

};

我包含这两个内容并在Fiddle #1中打印范围ID。这符合我的预期 - redBox和blueBox的范围都是MyCtrl范围的子代。

<div ng-app='demo'>
    <div ng-controller='MyCtrl'>
        My scope's id is {{$id}}.  <br/>  My parent scope's id is {{ $parent.$id }}. 

        <red-box>
            My scope's id is {{$id}}.  <br/>  My parent scope's id is {{ $parent.$id }}.
        </red-box>

        <blue-box>
            My scope's id is {{$id}}.  <br/>   My parent scope's id is {{ $parent.$id }}.
        </blue-box>
    </div>

</div>

在Fiddle #2中，我只是在其中一个div的内容中添加一个标记。这会改变范围层次结构！即使它们没有嵌套，一个指令的范围也是另一个指令的父级。

这里发生了什么？这怎么可能改变范围的父子关系？

Answer 1

在Html5中，<p />表示<p>，因为<p>不是“自动关闭标记”。

所以，这个：

<p/>My parent scope's id is {{ $parent.$id }}.

将由您的浏览器解释为：

<p>My parent scope's id is {{ $parent.$id }}.</p>

您可能需要查看at this question。

为什么在指令的被转换内容中有一个<p>标记会改变范围层次结构？</p>

1 个答案: