如何控制 Angular 指令控制器和指令所在视图的控制器之间的数据 sharing/blocking

Question

我正在学习 AngularJS 1，并且对作用域和指令控制器感到困惑。我不明白为什么我的指令控制器可以访问控制指令所在视图的控制器中定义的所有变量，因为我已经在我的指令中插入了一个空的隔离范围，并且bindToController 对象，它仅引用视图的控制器变量之一。

Index.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>

MainController.js

function MainController() {
  ctrl = this;
  ctrl.here = "Hello World";
  ctrl.nowhere = "Hello Nowhere";
};    

angular
    .module('app')
    .controller('MainController', MainController);

basicDirective.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 之间有什么实际区别吗？

p.s。请记住，为了在这里发帖，我简化了我的代码以仅处理这个问题，因此所写的指令绝对是非常人为的。

Answer 1

有人好心地向我指出我忘记声明我的变量，结果我的 ctrl 变量提升了自己。在我的 MainController 中将 ctrl = this 更改为 var ctrl = this 解决了这个问题，现在我的指令完全符合我的预期。

如何控制 Angular 指令控制器和指令所在视图的控制器之间的数据 sharing/blocking

How to control data sharing/blocking between Angular directive controller and the controller of the view the directive is placed inside of

angularjs-1.5