使用相同的控制器在兩個div之間共享數據

我有兩個div使用相同的控制器，兩個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 
    } 
})

來源

2015-05-20 Atul Verma

可以使用服務來共享控制器和相同的控制器的不同實例之間的數據：

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: []}; 
 
    });

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

來源

2015-05-20 15:06:58 DTing

我希望有點使用相同的控制器 –

您可以使用相同的控制器...我更新了答案，使其更加清晰。 – DTing

兩者的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>

來源

2015-05-20 14:58:02

情況是不同的，我只是在這裏舉了一個小例子。實際上這兩個div是我使用指令創建的一個彈出窗口並添加了 –

在這種情況下，您可能想要使用存儲數據並將其注入控制器的服務（http://plnkr.co/edit/SWBjOjWYbP1rfPflvS80?p=預覽） –

由於你有兩個不同的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 
    } 
}]);

來源

2015-05-20 16:55:46

使用相同的控制器在兩個div之間共享數據

回答

相關問題