在控制器、服务和指令之间更新数据

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 创建自己的范围有关

注意

我通过将服务中的函数更改为：

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