$广播到控制器

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的不同范围内有一个控制器，我在这里有这个函数，它调用服务中的几个函数它就像一种切换功能

$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，让我稍微解释一下视频。

在前2次尝试中，您可能会看到我可以选择和取消选择，并且一切正常，但在第3次和第4次尝试中，您会看到我选择了一条线，然后我拨打电话并拨打removeSlip(slip)我打右边的X，为了取消选择左边的线，我必须手动完成。

Answer 1

因此，我开始了一个小提琴演示，这个过程比你之后开始的那种笨拙。这里我使用两个独立的控制器和一个服务（工厂）来管理数据。这可以在不使用$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); 
}