了解 angularJS 中的控制器作用域

Question

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

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

以下是angularjs例子

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>

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

了解 angularJS 中的控制器作用域

understanding the controller scope in angularJS

javascript

angularjs

angularjs-scope

angularjs-controller