使用Angular js中的服务在控制器之间共享数据

Question

Sharing between controllers through services 通过服务在控制器之间共享

I have already gone through the links and videos 我已经浏览了链接和视频

sharing data between controllers 控制器之间共享数据

similar sharing service 类似的共享服务

egghead.io link egghead.io链接

Through my problem is little weird 通过我的问题有点奇怪

I have a live working plunker for the same see plunker here 我有一个活着的打工者，同样在这里看到打工者

Problem description : 问题描述：

JAVASCRIPT JAVASCRIPT

 var testModule = angular.module('testmodule', []); testModule .controller('QuestionsStatusController1', ['$rootScope', '$scope', 'myservice', function ($rootScope, $scope, myservice) { $scope.myserviceCopy = myservice; $scope.myserviceCopy.newValue = $scope.NotBinding; myservice.confirming = "asdsadasdd"; $scope.ForceBinding = function(){ $scope.myserviceCopy.newValue = $scope.NotBinding; }; }]); testModule .controller('QuestionsStatusController2', ['$rootScope', '$scope', 'myservice', function ($rootScope, $scope, myservice) { $scope.myservice = myservice; $scope.newMyService = myservice; }]); testModule .service('myservice', function() { this.xxx = "yyy"; });

(in the plunker) "1" is working fine and updating instantly （在插栓中）“ 1”工作正常，并立即更新
"2" is only updating when i press the bindNow button 当我按下bindNow按钮时，“ 2”仅在更新
"3" is not updating at all “ 3”根本没有更新

I just want all of them to refresh instantly and I dont want to use the "1" way(in the plunker) 我只希望它们所有人都立即刷新，并且我不想使用“ 1”方式（在插塞器中）

I know I must be missing something that is conceptually different from what I have perceived. 我知道我一定会在概念上与我所感知的有所不同。

Answer 1

I am not sure why you were creating some many copies of the service I have simplified your code and I think it should work as you expect: 我不确定为什么您要创建许多服务副本，因此简化了代码，并且我认为它应该可以按预期工作：

js js

var testModule = angular.module('testmodule', []);

testModule
   .controller('QuestionsStatusController1',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
       $scope.myservice = myservice;   
        $scope.myservice.confirming = "asdsadasdd";
        $scope.ForceBinding = function(){
        $scope.myservice.newValue = $scope.NotBinding;
    };
    $scope.$watch("NotBinding",
        function( newValue, oldValue ) {
          $scope.myservice.newValue = newValue;
        }
    );
    $scope.$watch("confirming",
        function( newValue, oldValue ) {
          $scope.myservice.confirming = newValue;
        }
    );
    }]);

testModule
   .controller('QuestionsStatusController2',
    ['$rootScope', '$scope', 'myservice',
    function ($rootScope, $scope, myservice) {
      $scope.myservice = myservice;
    }]);

testModule
    .service('myservice', function() {
      this.xxx = "yyy";
    });

and html: 和html：

<!DOCTYPE html>
<html ng-app="testmodule">

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div data-ng-controller="QuestionsStatusController1">
     1<br> <input ng-model="myservice.xxx" />{{myService.xxx}}<br>
      <hr>
     2<br> Dynamic Binding :       <input ng-model="NotBinding"/><br>
      Click to dynamic Bind <input type="button" value="bindNow" ng-click="ForceBinding()" >
    <hr>

    3<br>Binding directly to the service model<input ng-model="myservice.confirming">
    </div>
    <hr><hr><hr><hr><hr>

    <div data-ng-controller="QuestionsStatusController2">
   The value of xxx is: {{ myservice.xxx }}
   <hr>
   Dynamic Binding Problem Value  : {{myservice.newValue}}
   <hr>
   Direct binding to the service object  : {{myservice.confirming}}
    </div>
  </body>

</html>
<!DOCTYPE html>
<html ng-app="testmodule">

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div data-ng-controller="QuestionsStatusController1">
     1<br> <input ng-model="myservice.xxx" />{{myService.xxx}}<br>
      <hr>
     2<br> Dynamic Binding :       <input ng-model="NotBinding"/><br>
      Click to dynamic Bind <input type="button" value="bindNow" ng-click="ForceBinding()" >
    <hr>

    3<br>Binding directly to the service model<input ng-model="confirming">
    </div>
    <hr><hr><hr><hr><hr>

    <div data-ng-controller="QuestionsStatusController2">
   The value of xxx is: {{ myservice.xxx }}
   <hr>
   Dynamic Binding Problem Value  : {{myservice.newValue}}
   <hr>
   Direct binding to the service object  : {{myservice.confirming}}
    </div>
  </body>

</html>

Check the differences between your code and mine and you'll find what was wrong, for instance the div for the controller 1 was closed before number 3 (that was why it wasn't being updated). 检查代码和我的代码之间的差异，您会发现问题所在，例如，控制器1的div在数字3之前关闭了（这就是为什么它没有被更新的原因）。

You can see it in this plunkr . 您可以在这个笨拙的工具中看到它。

使用Angular js中的服务在控制器之间共享数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-02-18 10:32:26

使用Angular js中的服务在控制器之间共享数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-02-18 10:32:26

解决方案1
0 已采纳 2014-02-18 10:32:26