コントローラーのスコープを制限するために属性セレクターを使用する方法を理解できません。最小限のコントローラー コードは次のとおりです。
import 'package:angular/angular.dart';
@NgDirective(
selector: '[my-controller]',
publishAs: 'ctrl'
)
class MyController {
String foo = 'fooooooooooooo';
}
main() {
ngBootstrap(module: new Module()
..type(MyController));
}
そして、そのコントローラーを使用するビューは次のとおりです。
<!DOCTYPE html>
<html>
<body>
<div>
<!-- DOES NOT WORK. MAKES SENSE. -->
<p>Outside ng-app: {{ctrl.foo}}</p>
</div>
<div ng-app>
<div my-controller>
<!-- WORKS. MAKES SENSE -->
<p>Inside my-controller div: {{ctrl.foo}}</p>
</div>
<!-- WORKS. WHY? It is outside the div with the my-controller attribute -->
-->
<p>Outside my-controller div: {{ctrl.foo}}</p>
</div>
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
予想通り、{{ctrl.foo}}
コードはng-app
. また、予想どおり、{{ctrl.foo}}
の中で動作します<div my-controller>
。しかし、なぜそれが外 で機能するのかわかりません<div my-controller>
。何か案は?