Question

我有点担心

这来自名为BetSlipFactory

的服务

  removeSlip: function(slip) {

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

然后我在该服务的控制器中有这个功能

$scope.removeSlip = function(slip) {

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

}

接下来我在一个名为LinesCtrl的不同范围内有一个控制器，我在这里有这个功能，它从服务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内slip 1}}陈述。

当我调用$ scope.removeSlip（slip）时，我需要杀死BetSlipFactory参数，在removeSlip(slip)的范围内，一切正常。

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

在前2次尝试中你可能会看到我能够选择和取消选择并且一切都很好，但是在第3次和第4次尝试中，你看到我选择了一行，然后我去打电话{{1当我在右边播放X时，为了取消选择左边的行，我必须手动完成。

Answer 1

所以我开始小提示这个过程比你开始使用的plnkr低得多。在这里，我使用两个独立的控制器和一个服务（工厂）来管理数据。这可以在不使用$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);
}

$ BROADCASTing从服务到控制器

1 个答案: