代码之家 › 专栏 › 技术社区 › Stepan Suvorov bolelamx

具有隔离和非隔离作用域的指令内部内容

angularjs-scope angularjs-directive angularjs

15

Stepan Suvorov bolelamx · 技术社区 · 10 年前

我发现 范围:真 指令内部内容的类型:

<body ng-init="x=10">
    <mydir>
       {{x}}
    </mydir> 
</body>

因此{{x}}是内部内容,指令定义为:

.directive('mydir', function() {
   return {
       scope: {},
       link: function(scope){
           scope.x = 5;
       }
   };
});

当我们将范围定义为孤立的( 作用域:{} ),它将{{x}}输出为10,因此使用外部范围。但当我们为指令创建新范围时( 范围:真 ),它会将其用于内部内容并输出5。因此,它对2种情况的内部内容使用不同的范围。有人能给我一个提示/链接到源代码/手册来解释这种不一致吗?

这里是 plnk 玩代码。

更新 :我理解什么是JavaScript原型继承。我知道指令作用域类型之间的区别。我的目标不是显示5而不是10。问题是关于内部模板,在这两种情况下都应该用父范围进行插值,因为它不能访问子/孤立范围的属性。

3 回复 | 直到 10 年前

1

5

stanleyxu2005 10 年前

在原始代码段中 {{x}} 不属于 <mydir> 。您应该为指令定义一个模板。

// js
.directive('mydir', function() {
   return {
       template: '{{x}}',
       scope: {},
       link: function(scope){
           scope.x = 5;
       }
   };
});

// html
<body ng-init="x=10">
    <mydir></mydir> 
</body>

这里是 the preview

2

3

Stepan Suvorov bolelamx 10 年前

A从角度问题中得到了答案: https://github.com/angular/angular.js/issues/13845#issuecomment-174953398

下面是源代码答案: https://github.com/angular/angular.js/blob/eae0a1121ffcc636d760463105dcdc548ea47390/src/ng/compile.js#L2538-L2545

var scopeToChild = scope;
if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) {
      scopeToChild = isolateScope;
}
childLinkFn && childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn);

简历: 在隔离范围类型的情况下, 仅为指令模板提供范围 ,但不适用于内部内容。

3

2

Cleverguy25 10 年前

有些不对劲的事情正在发生。如果你在打开Batarang的情况下在Chrome中运行代码,你可以看到 作用域:{} 它确实在创建一个与第一个完全断开连接的新作用域,并将变量设置为5。但是您的内插字符串绑定到外部作用域。如果您设置 范围:真 它还创建了一个从外部继承的新范围,并且{{x}}插值正确绑定。我不认为指令上的作用域参数不起作用,绑定的东西不起作用。