Question

我有两个具有相同控制器的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>

脚本

var app=angular.module('myapp',[])
.controller('ctrl1',function($scope){
  $scope.list={
    greet:'hola'
  }
  $scope.add=function(data){
    $scope.list.greet=data
  }
   $scope.add1=function(data){
    $scope.list.greet=data
  }
})

Answer 1

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

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

Answer 2

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

＆＃13;

var app = angular.module('myapp', [])
  .controller('ctrl1', function($scope, myService) {
    $scope.a = myService.list;
    $scope.add = function(data) {
      $scope.a.greet.push(data);
    }
  })
  .service('myService', function() {
    this.list = {greet: []};
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<body ng-app="myapp">
  <div ng-controller="ctrl1">
    Ctrl1: <br>
    {{a.greet}}
    <button ng-click="add('c1a')">add</button>
  </div>
  <div ng-controller="ctrl1">
    Ctrl1: <br>
    {{a.greet}}
    <button ng-click="add('c1b')">add</button>
  </div>
</body>

＆＃13;

Answer 3

由于您有两个不同的ng-controller指令，每个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
  }
}]);

使用相同的控制器

3 个答案: