在控制器，服務和指令之間更新數據

Question

我編寫了一個非常簡單的測試應用程序，如下所示：

angular.module('tddApp', [])

.controller('MainCtrl', function ($scope, $rootScope, BetslipService) {
    $scope.displayEvents = [
        {
            id: 1,
            name: 'Belarus v Ukraine',
            homeTeam: 'Belarus',
            awayTeam: 'Ukraine',
            markets: {home: '2/1', draw: '3/2', away: '5/3'},
            display: true
        }
    ];
    $scope.betslipArray = BetslipService.betslipArray;
    $scope.oddsBtnCallback = BetslipService.addToBetslip;
    $scope.clearBetslip = BetslipService.clearBetslip;
})

.directive('oddsButton', function () {
    return {
        template: '<div class="odds-btn">{{market}}</div>',
        replace: true,
        scope: {
            market: '@',
            marketName: '@',
            eventName: '@',
            callback: '&'
        },
        link: function (scope, element) {

            element.on('click', function() {
                scope.callback({
                    name: scope.eventName,
                    marketName: scope.marketName,
                    odds:scope.market
                });
            });
        }
    };
})

.factory ('BetslipService', function ($rootScope) {
    var rtnObject = {};

    rtnObject.betslipArray = [];

    rtnObject.addToBetslip = function (name, marketName, odds) {
        rtnObject.betslipArray.push({
            eventName: name,
            marketName: marketName,
            odds: odds
        });
    };

    rtnObject.clearBetslip = function () {
        rtnObject.betslipArray = [];
    };

    return rtnObject;
});

我已將數組分配給控制器變量。 我還分配了修改數組的功能。 要將對象添加到數組，請使用具有獨立作用域的指令來調用回調。 我不太了解發生了一些奇怪的行為：

=>單擊指令將在服務中運行回調。 我已經進行了一些調試，並且似乎控制器變量已更新，但未在html中顯示。 =>單擊按鈕以清除陣列無法正常工作。 第一次導致元素顯示，此后它無效。

我認為這可能與嵌套ng-repeats創建自己的作用域有關

NB

我通過將服務中的功能更改為以下方式修復了無法清除的陣列：

while (rtnObject.betslipArray.length > 0) {
    rtnObject.betslipArray.pop();
}
// instead of 
rtnObject.betslipArray = [];

這是有道理的，因為服務變量被指向一個新對象，而舊引用仍將保留在控制器中。

我通過將回調調用包裝在指令中的scope。$ apply（）中來更新html。 這部分我不太了解。 當指令具有隔離范圍時，在指令中調用的scope。$ apply（）如何對控制器范圍產生影響？ 更新的小提琴： http : //jsfiddle.net/b6ww0rx8/7/

任何想法都非常感謝

jsfiddle： http : //jsfiddle.net/b6ww0rx8/5/

C

Answer 1

我在這里工作： http : //jsfiddle.net/b6ww0rx8/8/

添加了$q ， $scope.$emit和$timeout子句，以幫助您的指令/服務和控制器之間進行通信。

我還要說我不會將服務功能分配給控制器$scope,您應該在控制器中定義調用服務功能的功能。

代替這個：

$scope.clearBetslip = BetslipService.clearBetslip;

做這個：

$scope.clearBetslip = function(){
    BetslipService.clearBetslip().then(function(){
        $scope.betslipArray = BetslipService.getBetslipArray();
    });
};