如何根据 controller1 中的操作触发 controller2 中的事件

Question

Here 是我创建的 plunkr。基本上我在这段代码中遇到了 2 个问题 -

我需要帮助在下拉列表中加载月份和
当下拉列表中的月份从 headerController 更改时，该月的销售额显示在 detailController 中。我正在尝试使用 service.

如能帮助解决这两个问题，我将不胜感激。

Answer 1

您可以简单地通过在 $rootScope 中使用来自一个控制器的 $broadcast 并在 $scope 中使用 $on 收听该事件来实现此目的。虽然我建议您使用将在控制器之间共享数据的服务。使用点规则将减少您的代码。看看下面的优化代码。您也可以将 select 替换为 ng-repeat 和 ng-option 以将对象保存在 select.

标记

  <div data-ng-controller="headerController">
    <h3>Select Month</h3>
    <select id="month" ng-model="sales.selectedMonth" 
     ng-options="month.monthId for month in sales.monthlySales">
    </select>
  </div>
  <div data-ng-controller="detailsController">
    <h3>Sales for  Month</h3>
    <div ng-bind="sales.selectedMonth"></div>
  </div>

代码

app.service('valuesService', [function() {
  var factory = {};
  factory.sales = {}
  factory.sales.salesForMonthId = 10;
  factory.sales.months = [1, 2];

  factory.sales.monthlySales = [{monthId: 1,sales: 10}, {monthId: 2,sales: 20}];
  factory.sales.selectedMonth = factory.sales.monthlySales[0];
  return factory;
}]);

app.controller('headerController', ['$scope', 'valuesService',
  function($scope, valuesService) {
    $scope.sales = {};
    getData();
    function getData() {
      $scope.sales = valuesService.sales;
    }
  }
]);

app.controller('detailsController', ['$scope', 'valuesService',
  function($scope, valuesService) {
    $scope.sales = {};
    getData();
    function getData() {
      $scope.sales = valuesService.sales;
    }
  }
]);

Demo Plunkr

Answer 2

您可以将 $broadcast 服务用于活动目的。以下是 link，它解释了 $broadcast 的使用和两个控制器之间的通信。

enter code herehttp://plnkr.co/edit/d98mOuVvFMr1YtgRr9hq?p=preview

Answer 3

我可以看到几个月已经加载好了。

为了使数据绑定在服务和控制器之间正常工作，您需要绑定比实际数据高一级的数据，从而在表达式中产生一个点。这是因为 javascript 不通过原始类型的引用传递。

在役：

factory.data = {
  salesForMonthId: 0
}

在控制器中：

app.controller('detailsController', ['$scope', 'valuesService',
  function ($scope, valuesService) {
      $scope.values = valuesService.data;
  }
]);

在模板中：

<div>{{values.salesForMonthId}}</div>

Plunker

如何根据 controller1 中的操作触发 controller2 中的事件

how to trigger an event in controller2 based on an action in controller1

javascript

angularjs

angularjs-service

angularjs-scope

angularjs-controller