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属性封装到对象中，因为对象是通过引用传递的，而字符串是按值传递的。这使您可以更轻松地共享您的值并将其自动更新到服务和其他控制器中，而无需通过访问器访问您的属性。

理解angularJS中的控制器范围

3 个答案: