我现在正在学习 AngularJS 1，对范围和指令控制器感到困惑。我不明白为什么我的指令控制器可以访问控制器中定义的所有变量，该控制器控制放置指令的视图，因为我在指令中插入了一个空的隔离范围，以及bindToController 对象，它仅引用视图的控制器变量之一。
索引.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"></head>
</head>
<body>
<div ng-controller='MainController as ctrl'>
<div class="container">
<basic-directive id= "ctrl.here"></basic-directive>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/controllers/MainController.js"></script>
<script src="js/app/directives/basicDirective.js"></script>
</body>
</html>
主控制器.js
function MainController() {
ctrl = this;
ctrl.here = "Hello World";
ctrl.nowhere = "Hello Nowhere";
};
angular
.module('app')
.controller('MainController', MainController);
基本指令.js
function basicDirective () {
return {
scope: {},
template: [
'<p>{{ basic.id }} </p>',
'<p>{{ basic.there }} <p>',
'<p>{{ basic.somewhere }}</p>'
].join(""),
controller: function () {
dr = this;
dr.there = ctrl.here
dr.somewhere = ctrl.nowhere
},
controllerAs: "basic",
bindToController: {id: "="}
}
}
angular
.module('app')
.directive('basicDirective', basicDirective);
呈现：
<basic-directive id="ctrl.here" class="ng-isolate-scope">
<p class="ng-binding">Hello World </p>
<p class="ng-binding">Hello World </p>
<p class="ng-binding">Hello Nowhere</p>
</basic-directive>
到目前为止，我目前的理解让我期望只有第一个“Hello World”会呈现，因为这是我绑定到指令控制器的唯一一个。显然，我缺少一些东西。有人可以解释吗？我的指令控制器之间dr.there有什么实际区别吗？dr.id
ps 请记住，为了在此处发布，我简化了代码以仅处理此问题，因此所写的指令绝对是做作的。