Angularjs 使用同一控制器在两个div之间共享数据_Angularjs_Angularjs Directive_Angularjs Scope

Angularjs 使用同一控制器在两个div之间共享数据

angularjs

Angularjs 使用同一控制器在两个div之间共享数据,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我有两个具有相同控制器的div，两个div的显示数据几乎相同。两个div都有一个更新对象的按钮。但当一个div的按钮更新对象时，它不会反映在第二个div上 <body ng-app="myapp"> <div ng-controller="ctrl1"> {{list.greet}} <button ng-click="add('hi')">add</button> </div> <div ng-con

我有两个具有相同控制器的div，两个div的显示数据几乎相同。两个div都有一个更新对象的按钮。但当一个div的按钮更新对象时，它不会反映在第二个div上

<body ng-app="myapp">
  <div ng-controller="ctrl1">
    {{list.greet}}
    <button ng-click="add('hi')">add</button>
  </div>
  <div ng-controller="ctrl1">
    {{list.greet}}
    <button ng-click="add1('hello')">add</button>
  </div>
</body>

两个div都具有

ng controller

属性。这意味着每个div都有自己的控制器实例。尝试将ng控制器添加到公共父元素

<body ng-app="myapp" ng-controller="ctrl1">
  <div>
    {{list.greet}}
    <button ng-click="add('hi')">add</button>
  </div>
  <div>
    {{list.greet}}
    <button ng-click="add1('hello')">add</button>
  </div>
</body>


{{list.greet}
添加
{{list.greet}
添加

您可以使用服务在控制器和同一控制器的不同实例之间共享数据：

var-app=angular.module（'myapp'，[]）
.controller（'ctrl1'，函数（$scope，myService）{
$scope.a=myService.list；
$scope.add=函数（数据）{
$scope.a.greet.push（数据）；
}
})
.service（'myService'，function（））{
this.list={greet:[]}；
});

Ctrl1:

{{a.greet}}
添加
Ctrl1:

{{a.greet}}
添加
因为您有两个不同的ng控制器指令，所以每个div都有自己的作用域
最简单的选择是使用$rootScope
var app=angular.module('myapp',[])
.controller('ctrl1',['$scope', '$rootScope', function($scope, $rootScope){
  $rootScope.list={
    greet:'hola'
  }
  $scope.add=function(data){
    $rootScope.list.greet=data
  }
   $scope.add1=function(data){
    $rootScope.list.greet=data
  }
}]);

情况不同，我只是举了一个小例子。实际上，这两个div都是一个弹出窗口，我使用指令创建了它，并添加了一个。在这种情况下，您可能想使用一个服务来存储数据并将其注入控制器（）我想使用相同的控制器您可以使用相同的控制器。。。我更新了答案，让它更清楚。
var app=angular.module('myapp',[])
.controller('ctrl1',['$scope', '$rootScope', function($scope, $rootScope){
  $rootScope.list={
    greet:'hola'
  }
  $scope.add=function(data){
    $rootScope.list.greet=data
  }
   $scope.add1=function(data){
    $rootScope.list.greet=data
  }
}]);