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