javascript - 如何以正确的方式在 Angular 应用程序中的 Controller 之间共享数据

Question

好吧，这似乎不是关于这个主题的第一个问题，但是......

我知道我们可以为此使用服务或事件，但是网上有很多帖子说我们不应该大量使用事件。

我也知道我们可以为此创建单独的服务，但在我看来，这也不太好。如何“观察”数据变化？如何通知 smth 已更改？事件？又是？...

还有每个变体的性能如何？

那么，在 Angular 应用程序中，在 Controller 之间共享数据的真正好处和可能是最佳方式究竟是什么？而且，做这件事是个好主意吗？这是否意味着我们的应用程序有问题，一些架构或概念问题？也许这有什么味道？

请指点我，给个好的建议

提前致谢

更新

这是最常见的问题，因为有时我必须这样做。我想知道它是否很好， Angular 原则是否正确？

Answer 1

一种方法是使用作用域继承:

angular.module('app', [])
.run(['$rootScope', function($rootScope){
  $rootScope.sharedObj = {search:''};
}])
.controller('navCtr',['$scope',function($scope){
}])
.controller('routeCtr',['$scope',function($scope){
  $scope.$watch("sharedObj.search",function(d){
    $scope.data = d ? 'Searched data is ' + d : '';
  });
}]);

.main div{
  display:inline-block;
  border:1px solid black;
  height:100px;
  vertical-align: top;
}

.navigation{
  width: 20%
}
.navigation input{
  max-width: 70%;
}

.page {
  width: 75%
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" class="main">
  <div ng-controller="navCtr" class="navigation">
    search: <br/>
    <input ng-model="sharedObj.search"/>
  </div>
  <div ng-controller="routeCtr" class="page">
    {{data}}
  </div>
</div>

第二种方式是共享服务:

angular.module('app', [])
.factory('srcObject',[function(){
  return {
    value: ''
  }
}])
.controller('navCtr',['$scope', 'srcObject', function($scope, srcObject){
  $scope.search = srcObject;
}])
.controller('routeCtr',['$scope', 'srcObject', function($scope, srcObject){
  $scope.$watch(function(){return srcObject.value},function(d){
    $scope.data = d ? 'Searched data is ' + d : '';
  });
}]);

.main div{
  display:inline-block;
  border:1px solid black;
  height:100px;
  vertical-align: top;
}

.navigation{
  width: 20%
}
.navigation input{
  max-width: 70%;
}

.page {
  width: 75%
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" class="main">
  <div ng-controller="navCtr" class="navigation">
    search: <br/>
    <input ng-model="search.value"/>
  </div>
  <div ng-controller="routeCtr" class="page">
    {{data}}
  </div>
</div>