Javascript 同时使用两个控制器的正确方法？

我的网页中有一个左侧边栏，他的控制器总是在后台工作。在另一侧，我有状态视图，它取决于视图的左侧（典型的ui视图情况）。我想从另一个控制器更改侧栏控制器中的变量。两者同时处于活动状态。 我不想使用

$rootScope

实现这一点的最佳方式是什么

正确的方法是使用a在控制器之间共享数据/功能

在以下示例中，更改

MainCtrl

中的数据也会更新

SidebarCtrl

：

var myApp=angular.module（'myApp'，[]）；
myApp.factory（'Data'，function（））{
返回{FirstName:''}；
});
myApp.controller（'SidebarCtrl'，函数（$scope，Data）{
$scope.Data=数据；
});
myApp.controller（'MainCtrl'，函数（$scope，Data）{
$scope.Data=数据；
});

侧边栏Ctrl
数据是：{{Data.FirstName}

主控键
数据为：{Data.FirstName}
1路：使用服务
服务是单例的，您可以通过服务传递数据。例如，让我们调用我们的服务
dataservice
：

angular
  .module('app')
  .controller('FirstController', ['dataservice']);

function FirstController(dataservice) {
  dataservice.dataToPass = 'data to pass through controllers';
}

您可以从第二个控制器获取以下数据：

angular
  .module('app')
  .controller('SecondController', ['dataservice']);

function SecondController(dataservice) {
  let dataFromFirstController = dataservice.dataToPass;
}

angular
  .module('app')
  .controller('FirstController', ['$scope']);

function FirstController($scope) {
  $scope.$broadcast('passDataFromParentToChild', 'Data from FirstController');
}

第二种方式：使用$emit/$broadcast（仅当控制器是父控制器和子控制器时）
您可以通过
$emit
向上传递数据或通过
$broadcast
向下传递数据（$emit和$broadcast的工作原理类似，我将仅用$broadcast展示示例）。如果
FirstController
是父控制器，而
SecondController
是子控制器，则可以通过它们传递数据，如下所示：

angular
  .module('app')
  .controller('SecondController', ['dataservice']);

function SecondController(dataservice) {
  let dataFromFirstController = dataservice.dataToPass;
}

angular
  .module('app')
  .controller('FirstController', ['$scope']);

function FirstController($scope) {
  $scope.$broadcast('passDataFromParentToChild', 'Data from FirstController');
}

并在
SecondController
中获取数据：

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$on('passDataFromParentToChild', function (event, data) {
    console.log(data); // will be "Data from FirstController"
  });
}

angular
  .module('app')
  .controller('FirstController', ['$scope']);

function FirstController($scope) {
  $scope.varFromParentController = 'First';
}

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$parent.varFromParentController = 'Second';
}

第三种方式：使用$scope.$parent（仅当控制器是父控制器和子控制器时）
如果要从子控制器更改父控制器的变量，下面是最简单的方法（假设
FirstController
是
SecondController
的父控制器）：

让我们从
SecondController
更改
$scope.varFromParentController
：

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$on('passDataFromParentToChild', function (event, data) {
    console.log(data); // will be "Data from FirstController"
  });
}

angular
  .module('app')
  .controller('FirstController', ['$scope']);

function FirstController($scope) {
  $scope.varFromParentController = 'First';
}

angular
  .module('app')
  .controller('SecondController', ['$scope']);

function SecondController($scope) {
  $scope.$parent.varFromParentController = 'Second';
}

也许最好的方法是在指令中初始化变量，并在控制器之间共享它们@BurakAkyıldız的可能副本一个链接，接受的答案使用$scope事件。最好将其存储到服务中。看，非常感谢，这正是我想要的，几乎是。我在MainCtrl上显示一个表，在删除、编辑和添加一些行之后，我调用服务器来获取新表，我想在侧栏Ctrl上也看到更改。@试图知道，如果你想利用
$scope
，有时使用
$scope
比
var vm=this
更好