如何在angularJs中的模块之间同步数据

时间:2015-05-20 16:08:49

标签: angularjs

在AngularJS中,当更新其中一个数据时,我们如何同步子模块数据。

在下面的示例中,myService在otherApp和myApp之间共享。如果我们点击重置数据则不会同步。

var otherApp = angular.module('otherApp', []);
otherApp.factory('myService', function() {
  var myService = {
    someData: ''
  };
  return myService;
});
otherApp.controller('otherCtrl', function($scope, myService) {
  $scope.shared = myService;
});


var app = angular.module('myApp', ['otherApp']);

app.controller('myCtrl', function($scope, myService) {
  $scope.shared = myService;
  
  $scope.reset = function (){
    $scope.shared = {someData:0};
    
  };
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div ng-controller="otherCtrl">
    <span>otherCtrl:</span>
    <input ng-model="shared.someData" placeholder="Type here..">
  </div>
  <div ng-controller="myCtrl">
  <span>myCtrl:</span>
  <input ng-model="shared.someData" placeholder="Type here..">
    
    <button ng-click="reset()">reset</button>
  </div>
  
  
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您不会修改共享服务中的数据。您将新对象分配给控制器作用域的shared属性:此属性现在引用另一个对象,而不是引用该服务。因此只有该控制器范围受到影响。其他控制器$scope.share仍在引用该服务。

替换

$scope.shared = {someData:0};

通过

$scope.shared.someData = 0;