Angular - 模板未使用从两个不同范围绑定到同一服务的数据刷新

Question

我将两个不同范围的数据绑定到同一个公共服务数据上。当我通过controller 1更新数据时，controller 2中的数据并没有在模板中刷新。

显示问题的示例：

<body ng-app="demoShareBindApp">
  <div ng-controller="FirstCtrl as first">
    Set share data to : <a href ng-click="setShareDataTo('Me')">"Me"</a>
     - <a href ng-click="setShareDataTo('Myself')">"Myself"</a>
     - <a href ng-click="setShareDataTo('I')">"and I"</a>
  </div>
  <div ng-controller="SecondCtrl as second">
    Text entered : {{sShareData}}
    <br>
    <br><a href ng-click="revealShareData()">Reveal data</a>
  </div>
  <script src="bower_components/angular/angular.js"></script>
  <script>
  angular
    .module('demoShareBindApp', [])
    .service('myService', function () {
      return {
        shareData: null
      }
    })
    .controller('FirstCtrl', ['$scope', 'myService', function ($scope, myService) {
      $scope.setShareDataTo = function(content) {
        myService.shareData = content;
      };
    }])
    .controller('SecondCtrl', ['$scope', 'myService', function ($scope, myService) {
      $scope.sShareData = myService.shareData;
      $scope.revealShareData = function() {
        console.log(myService.shareData);
      }
    }]);
  </script>
</body>

Text entered : {{sShareData}} 永远不会更新，而单击 "Reveal data" 会在控制台中显示正确的共享数据。

我在其他 SO post 中找不到关于这个特定主题的任何线索。我想这可能是“$watch/$digest”的问题，但我不知道这里到底发生了什么。

欢迎详细解释！

Answer 1

您正在通过服务共享数据。当第一个控制器下的数据发生变化时，你将这个更新的数据设置为服务，但是第二个控制器不知道服务引用的共享数据发生了变化，所以我们需要通知第二个控制器数据发生变化或者我们可以通过[=共享数据14=]

我创建了一个fiddle，检查一下

https://jsbin.com/midebu/edit?html,js,output

第一种方法。使用服务

  $scope.setShareDataTo = function(content) {
    myService.shareData = content;
    $rootScope.$broadcast('datacChanged');
  };

在第二个控制器中

$rootScope.$on('dataChanged', function(){
    // get updated data
    $scope.sShareData = myService.shareData;
})

另一种方式是，我们不需要使用服务，我们可以简单地使用事件传递共享数据

$scope.setShareDataTo = function(content) {
    $rootScope.$broadcast('datacChanged', content);
  };

在第二个控制器中

 $rootScope.$on('dataChanged', function(event, data){
    // get updated data
    $scope.shareData = data;
})

Angular - 模板未使用从两个不同范围绑定到同一服务的数据刷新

Angular - Template not refreshed with data bound from two different scopes to the same service

angularjs

angularjs-service

angularjs-scope