angularjs 1.5-如何控制Angular指令控制器和指令所在视图的控制器之间的数据共享/阻塞

我现在正在学习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之间有什么实际的区别吗？

请记住，为了在这里发布，我简化了代码，只处理了这个问题，所以所写的指令绝对是非常做作的。

有人好心地向我指出，我忘记声明我的变量，因此我的ctrl变量自行提升。在我的MainController中将ctrl = this更改为var ctrl = this解决了问题，现在我的指令正按照我预期的方式运行。

相关内容

最新更新

热门标签：