Javascript 理解angularJS中的控制器范围

在html文件中，考虑如下两个div区域

<div class="divArea1" ng-controller="myController">
   <input ng-click="updateName()" type="button" value="button"/>
</div>

<div class="divArea1" ng-controller="myController">
  <p>{{name}}</p>
</div>

---

问题是，当我试图更新名称时，单击更新按钮，它在div区域的第二个区域中不可见。我有没有搞错。

您有两个不同的控制器（具有两个不同的作用域），名称相同

您需要将控制器放在父控制器中，以将名称保持在与按钮相同的范围内：

<div id="container" ng-controller="myController">
   <div class="divArea1">
      <input ng-click="updateName()" type="button" value="button"/>
   </div>

   <div class="divArea1">
     <p>{{name}}</p>
   </div>
</div>

{{name}}

这是演示 注入$rootScope，以便从全局范围执行此操作

productApp.controller("myController", [ '$scope','$rootScope', function($scope, $rootScope) {
$rootScope.name= "XYZ";
$scope.updateName= function() {
    $rootScope.name = "ABC";

};} ]);

---

希望这将帮助您

控制器不是单例。每次你有一个新的控制器，你就有了这个控制器的一个新实例，具有一个新的隔离作用域

如果您需要在控制器之间共享数据，则应使用工厂（即单例）

从您的控制器：

angular.module('app').controller('myController', 
    ['$scope','mySharedData', 
    function($scope, mySharedData){
        $scope.someObject = mySharedData.object;
        $scope.updateName= function() {
            $scope.someObject.name = "ABC";
        };
    }
]);

在你看来：

<div class="divArea1" ng-controller="myController">
   <input ng-click="updateName()" type="button" value="button"/>
</div>

<div class="divArea1" ng-controller="myController">
  <p>{{someObject.name}}</p>
</div>

{{someObject.name}

---

注意：我已经将name属性封装到一个对象中，因为对象是通过引用传递的，字符串是通过值传递的。这使您可以更轻松地共享您的值，并将其自动更新到服务和其他控制器中，而无需通过访问器访问您的属性。

您有两个控制器，因此它们有自己的作用域。当您执行

ng controller=“myController”

时，请执行类似于

新建myController（…依赖项…

的操作，这样您只需创建两个实例。您应该将控制器放在这两个div的父容器中。即使以相同的方式命名控制器，angular也会将其实例化两次，使用两个不同的作用域如果在一个div中使用它，它应该可以工作，因为angular$scope继承自父控制器。如果将它们包装在一个div中，它就可以工作了。谢谢大家的回复。不建议使用rootScope，因为它会重载摘要（）相反，您可以使用

angular.module('app').controller('myController', 
    ['$scope','mySharedData', 
    function($scope, mySharedData){
        $scope.someObject = mySharedData.object;
        $scope.updateName= function() {
            $scope.someObject.name = "ABC";
        };
    }
]);

<div class="divArea1" ng-controller="myController">
   <input ng-click="updateName()" type="button" value="button"/>
</div>

<div class="divArea1" ng-controller="myController">
  <p>{{someObject.name}}</p>
</div>