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

【问题标题】：why is this controller instantiated only once?为什么这个控制器只实例化一次？
【发布时间】：2016-01-08 10:07:37
【问题描述】：

我有以下（也在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，并且只有第二个收件箱下方打印了绑定值：

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

【问题讨论】：

标签： javascript angularjs angularjs-controller angularjs-controlleras

【解决方案1】：

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

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

应该是

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

Working Plunkr

【讨论】：

已投票，但我将删除该问题。它对社区没有任何帮助。
@MarcusJuniusBrutus 它可以帮助像你这样可能犯拼写错误的人 :) 以及它常见的拼写错误，因为 Angular 指令在 IDE 上没有智能感知..
然而奇怪的是，在初始加载之后，人们可以在第一个字段或第二个字段中输入值并看到两个不同的值正在打印。对此有什么想法吗？
@MarcusJuniusBrutus 因为两者都使用不同 DOM 的不同控制器初始化..您正在创建相同 controller 的两个实例，context 在不同的 DOMs 上共享

【解决方案2】：

那是因为打字错误：

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

【讨论】：