javascript - $BROADCASTing 从服务到 Controller

Question

我有点担心

这来自名为 BetSlipFactory 的服务

  removeSlip: function(slip) {

    return betSlipSelectionRequest('/betSlip/removeSelection', {
      game: slip.game,
      pair: slip.pair,
      line: slip.line
    });
  }

然后我在该服务的 Controller 中有这个函数

$scope.removeSlip = function(slip) {

  $rootScope.$broadcast('betSlip:removeLines', slip);
  BetSlipFactory.removeSlip(slip)

}

接下来，我在不同范围内有一个名为 LinesCtrl 的 Controller ，这里有一个函数，它从服务 BetSlipFactory 调用几个函数，这就像一种切换功能

$rootScope.$on('betSlip:removeLines', function(event, slip) {
  if (slip) {
    BetSlipFactory.remove(line, row, type);
  };
});

$scope.addLineToBetSlip = function(line, row, type) {
  var spreadSelected = (row.spreadSelected && type === 'spread'),
    totalSelected = (row.totalSelected && type === 'total'),
    moneyLineSelected = (row.moneyLineSelected && type === 'moneyline');
  if (spreadSelected || totalSelected || moneyLineSelected) {

    BetSlipFactory.remove(line, row, type);

  }else {

    BetSlipFactory.add(line, row, type);

  }
};

然后是 HTML:

     <button ng-click="removeSlip(slip)"></button>

还有:

     <td ng-class="!row.moneyLineSelected ? 'lines-hover' : 'line-selected'">
        <a ng-click="addLineToBetSlip(line, row, 'moneyline')">
           <span ng-hide="row.noMoneyLine">{{:: row.moneyLine}}</span>
        </a>
     </td>

我需要什么:组合范围，当调用函数 $scope.removeSlip(slip) 时，我还需要调用 $scope.addLineToBetSlip(line, row, type) 然后该函数应调用 BetSlipFactory.remove(line, row, type);，因为它位于该 if 语句中。

当我调用 $scope.removeSlip(slip) 时，我需要终止 slip 参数，在 BetSlipFactory 范围内，一切正常。

I recorded a video for you to see what I am talking about ，让我稍微解释一下视频。

在前两次尝试中，您可能会看到我能够选择和取消选择，并且一切正常，但在第三次和第四次尝试中，您会看到我选择了一行，然后我调用电话并 当我在右侧播放 X 时，removeSlip(slip) ，并且为了取消选择左侧的行，我必须手动执行此操作。

Answer 1

所以我开始了一个 fiddle ，显示这个过程与您之后开始的 plnkr 相比愚蠢得多。这里我使用两个独立的 Controller 和一个服务(工厂)来管理数据。这可以在不使用 $rootScope 或 $broadcast 的情况下完成。希望您可以采用我在这里所做的并将其集成到您在 plnkr 上发布的所有代码中。下面你可以看到这是一个非常简单的过程

the jsfiddle

HTML:

<div ng-app="TestApp">
    <div id="colLeft" ng-controller="LeftController">
        <div ng-repeat="bet in possibleBets">
            <button ng-class="!bet.moneyLineSelected ? 'lines-hover' : 'line-selected'" ng-click="addLineToBetSlip(bet)">{{bet.name}}</button>
        </div>
    </div>
    <div id="colRight" ng-controller="RightController">
        Your Bets:<br>
        <div ng-repeat="bet in bets">
            Active bet: {{bet.name}} - <button ng-click="removeLineFromBetSlip(bet)">&times;</button>
        </div>
    </div>
</div>

CSS:

.lines-hover {

}

.line-selected {
    background:yellow;
}

#colLeft {
    width:65%;
    background:#f00;
    float:left;
}

#colRight {
    width:35%;
    background:gray;
    float:left;
}

最后是 JS

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

app.controller('LeftController', function($scope, BetSlipFactory)
{
    // this data is the data from your DB
    $scope.possibleBets = [
        {name:'Bet 1',moneyLineSelected:false},
        {name:'Bet 2',moneyLineSelected:false},
        {name:'Bet 3',moneyLineSelected:false}
    ];

    // now that I think about it, addLineToBetSlip is not a good name
    // since it actually toggles the bet
    $scope.addLineToBetSlip = function(bet)
    {
        bet.moneyLineSelected = !bet.moneyLineSelected; // toggle the moneyLineSelected boolean
        (bet.moneyLineSelected) ? BetSlipFactory.add(bet) : BetSlipFactory.remove(bet); // add or remove the bet
    };
});

app.controller('RightController', function($scope, BetSlipFactory)
{
    $scope.bets = BetSlipFactory.getAllBets(); // link to all the active bets

    // remove the bet from the factory
    $scope.removeLineFromBetSlip = function(bet)
    {
        bet.moneyLineSelected = false;
        BetSlipFactory.remove(bet);
    };
});

app.service('BetSlipFactory', function()
{
    //a place to keep active bets
    var theBets = [];
    return {
        add: function(bet)
        {
            // actually add the bet to this local array
            theBets.push(bet);
        },
        remove: function(bet)
        {
            // you should do error checking of the index before removing it
            var index = theBets.indexOf(bet);
            theBets.splice(index,1);
        },
        getAllBets: function()
        {
            //simply return all active bets
            return theBets;
        }
    }
});

function log(msg)
{
    console.log(msg);
}