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

Angularjs 为什么我可以访问在隔离范围之外定义的属性?,angularjs,Angularjs,我有以下HTML: <ng-view> <tabset> <tab> <tab-heading> <i class="glyphicon glyphicon-info-sign"></i> </tab-heading> <div> <di

我有以下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>
指令
ng view
创建了一个新的作用域,我认为它将作为参数注入
SampleController
构造函数

tabset
创建自己的独立作用域,这样它就不会从
ng视图创建的作用域继承属性

.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'
    },

我不明白的是,为什么可以从
选项卡
指令创建的范围内访问
ng view
指令创建的范围内定义的属性
selectedWord.translation
(它本身是隔离范围,前面是
选项卡集
创建的隔离范围)?

当指令使用转换时,它会为转换的内容创建一个子范围(有时也称为转换范围)。当一个指令还定义了一个独立的作用域时,实际上在同一个指令中使用了两个作用域:

  • 转置范围-绑定到转置内容
  • 独立作用域-绑定到模板(如果已定义)或作为指令的专用作用域
  • 因此,
    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>
    
    
    {{name}}
    
    谢谢!除了
    docs.angularjs.org
    之外,你知道有什么好的资源可以很好地解释转置的范围吗?转置的内容在哪里或如何定义?只要你在一个元素中有一个指令的内容,那就是转置的内容。转换范围没有什么特别之处。这只是一个儿童范围。带有模板的指令将用其模板覆盖转写的内容。但是,您也可以通过在模板中应用ng TRACLUDE指令将转写的内容链接到模板中。非常感谢您详细的回答!我还发现了问题和答案——这和隐藏的内容有什么关系吗?我假设
    内部隔离作用域指令:{{myProperty}
    我的继承作用域指令
    内部的转置内容,因此它可以通过转置作用域访问
    myProperty
    ?啊,我很聪明:)。。。谢谢!:)这家伙没有明确说明指令是
    转置的
    ,所以我猜它默认设置为
    true
    <!-- 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>