Question

我知道使用$ rootScope在控制器之间共享值是一个坏主意，每个人都建议使用服务，并作为答案链接到角度文档。但是我在那里失去了，因为官方文档没有显示任何简单的例子，当我试图从这里实现一些例子时，StackOverflow - 它们对我不起作用（也许是因为我使用的是ng-repeat？）。我一直试图解决它好几天，为了不打扰你，但现在我完全处于亏损状态。

您能否告诉我如何解决下面的示例，然后我将在我的应用程序中使用它（我在5个不同的控制器中使用了大约50个不同的范围）。下面的例子是我的问题的简单概述。我还为它创建了一个plunker http://plnkr.co/edit/J4fZ51koueyUX9mXqzDk?p=preview

我的JS中有三个控制器：

app.controller('TotalCalc', function($scope) {

  });

app.controller('color', function($scope) {
  $scope.colors = [
  {name1: "Red",price1: 300},
  {name1: "Green",price1: 660},
  {name1: "Black",price1: 920}
];});

app.controller('coating', function($scope) {
  $scope.coatings = [
  {name2: "Single coating",price2: 2},
  {name2: "Double coatings",price2: 4},
  {name2: "Triple coating",price2: 7}
];});

在我的HTML中，我有：

<div class="container" ng-controller="TotalCalc">
Here I want to calculate a value: (color selected price) * (coating multiplier)<br>
Using the "selected.price1" * "selected.price2", from the "color" and "coating" controllers below.

<div class="col-xs-6" ng-controller="color">
<strong>Color selected price: {{selected.price1 ||0}}</strong>
 <div class="list-group small">
  <a ng-repeat="color in colors" ng-click="$parent.selected = color" class="list-group-item" ng-class="{active:selected==color}"><span class="badge pull-right">$ {{color.price1}}</span>{{color.name1}}</a>
 </div>
</div>

<div class="col-xs-6" ng-controller="coating">
 <strong>Coating multiplier: {{selected.price2 ||0}}</strong>
 <div class="list-group small">
  <a ng-repeat="coating in coatings" ng-click="$parent.selected = coating" class="list-group-item" ng-class="{active:selected==coating}"><span class="badge pull-right">{{coating.price2}}</span>{{coating.name2}}</a>
 </div>
</div>
</div>

请注意，整个地方（单页面应用程序）位于“TotalCalc”控制器下，从那里我无法访问其中两个控制器的值。

我知道如果我想在整个应用程序中访问来自不同控制器的任何值/范围，我应该以某种方式使用服务（？）。但经过几天的阅读和尝试，我找不到工作的方法。 :(你能用上面我简化的例子，并告诉我它是如何完成的吗？提前谢谢你。

Answer 1

正如@Nikos指出的那样，你真的不需要多个嵌套控制器。话虽如此，这里是一个使用服务以及一些自定义事件进行通信的示例。不需要这些事件，因为您可以通过服务将所有数据绑定在一起，但我将它们放入灵感

app.factory('CoatingService', function() {
  var thisService = {
    colors: [
      {name1: "Red",price1: 300},
      {name1: "Green",price1: 660},
      {name1: "Black",price1: 920}
    ],
    coatings: [
      {name2: "Single coating",price2: 2},
      {name2: "Double coatings",price2: 4},
      {name2: "Triple coating",price2: 7}
    ],

    selected:{
      color:{},
      coating:{}
    }
  }

  return thisService

})

app.controller('TotalCalc', function($scope, CoatingService) {
  $scope.selected=CoatingService.selected;
 function updateTotal(){
      $scope.totalprice= ($scope.selected.color.price1 ||0) + ($scope.selected.coating.price2||0)
 }
 updateTotal();

 $scope.$on('doPriceUpdate',function(){
   updateTotal();
  })

});

app.controller('color', function($scope, CoatingService) {

  $scope.colors = CoatingService.colors;
  $scope.selected = CoatingService.selected;

  $scope.updateColor=function(color){
    $scope.selected.color=color;
    $scope.$emit('doPriceUpdate')
  }  

});
/* similar pattern for coating controller*/

你可以在一个控制器中完成所有这一切，但很容易用较少的代码，但仍然保持服务存储数据

的 DEMO

AngularJS。在整个应用程序中使用来自不同控制器的值/范围

1 个答案: