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

Question

通过服务在控制器之间共享

我已经浏览了链接和视频

控制器之间共享数据

类似的共享服务

egghead.io链接

通过我的问题有点奇怪

我有一个活着的打工者，同样在这里看到打工者

问题描述：

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"; });

（在插栓中）“ 1”工作正常，并立即更新
当我按下bindNow按钮时，“ 2”仅在更新
“ 3”根本没有更新

我只希望它们所有人都立即刷新，并且我不想使用“ 1”方式（在插塞器中）

我知道我一定会在概念上与我所感知的有所不同。

Answer 1

我不确定为什么您要创建许多服务副本，因此简化了代码，并且我认为它应该可以按预期工作：

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";
    });

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

检查代码和我的代码之间的差异，您会发现问题所在，例如，控制器1的div在数字3之前关闭了（这就是为什么它没有被更新的原因）。

您可以在这个笨拙的工具中看到它。

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