$廣播到控制器

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); 
}