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

Question

我的网页上有左侧边栏，他的控制器总是在后台工作。在剩下的一面，我有视图的状态取决于视图的左侧（经典的ui-view情况）。我想从另一个控制器更改侧栏控制器中的变量。两者同时活跃。 我不想使用$rootScope。

实施该方法的最佳方法是什么？

Answer 1

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

在以下示例中，更改MainCtrl中的数据也会更新SidebarCtrl：

＆＃13;

＆＃13;

var myApp = angular.module('myApp', []);

myApp.factory('Data', function() {
    return { FirstName: '' };
});

myApp.controller('SidebarCtrl', function($scope, Data) {
    $scope.Data = Data;
});

myApp.controller('MainCtrl', function($scope, Data) {
    $scope.Data = Data;
});

＆＃13;

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

<div ng-app="myApp">
    <div ng-controller="SidebarCtrl">
        <h4>SidebarCtrl</h4>
        Data is: <strong>{{Data.FirstName}}</strong>
    </div>
    <hr>
    <div ng-controller="MainCtrl">
         <h4>MainCtrl</h4>
        <input type="text" ng-model="Data.FirstName">
        Data is: {{Data.FirstName}}
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

第一种方式：使用服务

服务是单身，您可以通过服务传递数据。例如，让我们调用我们的服务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;
}

第二种方式：使用$ emit / $ broadcast（仅当控制器是父节点和子节点时）

您可以通过$emit或向下通过$broadcast传递向上数据（$ emit和$ broadcast类似，我会展示例子只有$ broadcast）。如果FirstController是父级，而SecondController是子级，则可以通过它们传递数据：

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

第三种方式：使用$ scope。$ parent（仅当控制器是父节点和子节点时）

如果要从子控制器更改父控制器的变量，这是最简单的方法（假设FirstController是SecondController的父级）：

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

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

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

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

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