为什么这个控制器只实例化一次？

Question

我有以下内容（也在 Plunker 中）：

<!doctype html>
<html 
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  </head>
  <body ng-app="theApp">
    <div ng-conroller="ExampleCtrl as ctl">
      <input type="text" ng-model="ctl.value"/><br>
      {{ctl.value}}
    </div>
    <div ng-controller="ExampleCtrl as ctl">
      <input type="text" ng-model="ctl.value"/><br>
      {{ctl.value}}
    </div>
    <script>
     angular.module('theApp', [])
            .controller('ExampleCtrl', [
              function () {
                var self = this;
                self.value = 'Lorem ipsum';
                console.log('controller instantiated');
              }
            ]);
    </script>
  </body>
</html>

查看控制台，我只看到一条消息controller instantiated，只有第二个收件箱下方打印了绑定值：

我原以为会实例化两个单独的控制器，实际上在填写值后似乎有两个独立的范围，但我无法解释初始状态。

Answer 1

第一个 ng-controller 指令声明中的错字。

<div ng-conroller="ExampleCtrl as ctl">

应该是

<div ng-controller="ExampleCtrl as ctl">

Working Plunkr

Answer 2

那是因为打字错误：

第一个控制器拼写为：conroller 而不是 controller

为什么这个控制器只实例化一次？

why is this controller instantiated only once?

javascript

angularjs

angularjs-controller

angularjs-controlleras