Question

Here是我创造的傻瓜。基本上我对这段代码面临两个问题 -

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

我将非常感谢解决这两个问题的任何帮助。

Answer 1

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

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

Answer 2

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

<强>标记

  <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 3

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

要使正确的数据绑定跨服务和控制器工作，您需要将一个级别绑定到实际数据之上，从而在表达式中生成一个点。这是因为javascript没有通过引用传递原始类型。

在服务中：

factory.data = {
  salesForMonthId: 0
}

在控制器中：

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

在模板中：

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

Plunker

如何根据controller1

3 个答案: