了解angularJS中的控制器范围

Question

在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>

以下是角度js示例

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

问题是当我尝试更新名称时，单击更新按钮后，它在div区域的第二个位置不可见。 我在做任何错误吗？

Answer 1

您拥有的是两个具有相同名称的不同控制器（具有两个单独的作用域）。

您需要将控制器放在父控制器中，以使名称与按钮的作用域相同：

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

Answer 2

这是演示http://jsfiddle.net/wg7pb1yu/3/注入$ rootScope，以便它将在全局范围内执行

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

};} ]);

希望这个能对您有所帮助

Answer 3

控制器不是单例。 每次您有一个新的控制器时，您都将拥有该控制器的新实例以及新的隔离范围。

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

angular.module('app').factory('mySharedData', function(){
   var service = {
       object : objectToShare
   };

   var objectToShare =  {};

   return service;
});

从您的控制器：

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>

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