обновление данных между контроллером, обслуживание и директивы

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. => нажатие кнопки для очистки массива работает не так, как ожидалось. В первый раз он вызывает отображение элемента, после чего он не действует.

Я думаю, что это, возможно, придется делать с вложенными нг-повторы создают свои собственные областей

NB

Я установил массив не очищая путем изменения функции в службе:

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

Это имеет смысл, поскольку служебная переменная была указана на новый объект, в то время как старая ссылка сохранялась в контроллере.

Я получил html для обновления путем переноса обратного вызова в директиве в области. $ Apply(). Эта часть, которую я действительно не понимаю. Каким образом область действия. $ 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(); 
    }); 
};