Question

我将两个不同范围的数据绑定到相同的公共服务数据。当我通过控制器1更新数据时，控制器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}}永远不会更新，而点击＆＃34;显示数据＆＃34;在控制台中显示正确的共享数据。

我无法在这个特定主题的其他SO帖子中找到任何线索。我想这可能是＆＃34; $ watch / $ digest＆＃34;但是我无法弄清楚这里到底发生了什么。

欢迎任何详细解释！

Answer 1

您正在通过服务共享数据。当在第一个控制器下更改数据时，您将此更新数据设置为服务，但第二个控制器不知道服务引用的共享数据已更改，因此我们需要通知第二个控制器数据已更改或我们可以通过{{共享数据1}}

我创造了一个小提琴，检查它

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

第一种方法。使用服务

events

在第二个cntroller中

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

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

1 个答案: