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