为什么我可以访问隔离范围之外定义的属性？

Question

我有以下 HTML：

<ng-view>
    <tabset>
        <tab>
            <tab-heading>
                <i class="glyphicon glyphicon-info-sign"></i>
            </tab-heading>
            <div>
                <div>
                    <div>{{selectedWord.translation}}</div>
                </div>
    ...
</ng-view>

以及为视图加载的控制器：

angular.module('app').controller('SampleController', function ($scope) {
    $scope.selectedWord = {translation: '[te]'};
}

ng-view 指令创建了一个新作用域，我认为它会作为参数注入到SampleController 构造函数中。

tabset 创建自己的隔离作用域，因此它不会从ng-view 创建的作用域继承属性。

.directive('tabset', function() {
  return {
    restrict: 'EA',
    transclude: true,
    replace: true,
    scope: {
      type: '@'
    },

每个tab 指令还创建自己的范围，该范围也不是从tabset 指令创建的范围继承的。

.directive('tab', ['$parse', function($parse) {
  return {
    require: '^tabset',
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/tabs/tab.html',
    transclude: true,
    scope: {
      active: '=?',
      heading: '@',
      onSelect: '&select', //This callback is called in contentHeadingTransclude
                          //once it inserts the tab's content into the dom
      onDeselect: '&deselect'
    },

我不明白的是为什么可以从tab 指令创建的范围内访问ng-view 指令创建的范围内定义的属性tab 指令（它本身是独立的范围和前面是 tabset) 创建的隔离范围？

Answer 1

当指令使用嵌入时，它会为被嵌入的内容创建一个子范围（有时也称为嵌入范围）。当一个指令还定义了一个隔离作用域时，实际上在同一个指令中使用了两个作用域：

1. 嵌入范围 - 绑定到被嵌入的内容
2. 隔离范围 - 绑定到您的模板（如果已定义）或可用作指令的私有范围。

所以selectedWord之所以可以解析，是因为被嵌入的内容是绑定到ngView的嵌入范围的。并且任何指令的包含范围只是一个子范围，它在原型上从其父范围继承。

任何使用嵌入的指令都是如此：

示例

<!-- name defined in parent scope -->
<div ng-init="name='test'">
    <!-- ng-if creates a child scope for its transcluded contents
       The child scope prototypically inherits scope from its parents -->
    <div ng-if="true">
        <!-- this is the transcluded contents for ng-if -->
        <div> 
            <my-dir-using-isolate-scope>
               <!-- this is the transcluded contents for 
                    my-dir-using-isolate-scope directive --> 
               {{ name }} 
            </my-dir-using-isolate-scope>
        </div>
    </div>
</div>