связь между главным контроллером и директивным/директивным контроллером

У меня есть основной контроллер, в котором я хочу передать/транслировать событие

главный контроллер

.controller('gameCtrl', function(){
function moveToTileBy(moves)
  {
      var numberOfTiles = ctlr.board.tiles.length,
          player = getCurrentPlayer(),
          currentTileNumber = player.currentPositionTileNumber;

      if((moves + currentTileNumber) > numberOfTiles)
      {
        // alert player not enough moves
        return nextTurn();
      }
    // create a drag and drop
    $scope.$emit('movePlayer', currentTileNumber);
    $scope.$emit('activateTile', moves + currentTileNumber);
  }
})

У меня также есть директива для ng-repeatitems, каждый элемент имеет изолированную область, единственным подключением которой к основному контроллеру является модель области.

директива

.directive('phTile', ['$rootScope', 'Drake', function ($rootScope, Drake) {
return {
    restrict: 'A',
    scope: {
      tile: '@ngModel'
    },
    link: function (scope, element, attr) {
        var elem = element[0];
        console.log(scope.tile);
        $rootScope.$on('movePlayer', function(){
          console.log('root link move player ', arguments);
        });

        scope.$on('movePlayer', function(){ console.log('link scope move player', arguments);})
    }
};

HTML

<div ng-controller="gameCtrl as ctlr">
<div ng-repeat="(i, tile) in ctlr.board.tiles" class="w3-col tile tile-{{tile.number}}" ng-repeat-end-watch="ctlr.resize()" ng-model="tile" ph-tile><span>{{tile.number}}</span></div>
</div>

Я хочу, чтобы указанное выше событие в контроллере запускало серию манипуляций с 1 или несколькими элементами DOM.

Дилемма, с которой я столкнулся, заключается в том, что я не уверен, как/где построить логику для прослушивания указанного события и продолжить логику для манипуляции с домом....

Должно ли это быть

1) В директивном контроллере

return {
            restrict: 'A',
            scope: {
              tile: '=ngModel'
            }, controller: function($scope){ $scope.$on('move', function(){ /* manipulate dom element */}); }

2) Или по ссылке

return {
                restrict: 'A',
                scope: {
                  tile: '=ngModel'
                }, link: function(scope, element, attr){ scope.$on('move', function(){ /* manipulate dom element */}); }

Кроме того, мне нужно получить доступ к объекту «плитки» изолированной области и «элементу» директивы, чтобы продолжить манипулирование dom.


person KArneaud    schedule 27.05.2016    source источник


Ответы (1)


Похоже, вы пропустили отправку вопроса, но в двух словах манипулирование элементами DOM должно быть в ссылке.

Основываясь на том, что вы начинаете писать внизу («Кроме того, мне нужно получить доступ к объекту «плитки» и «элементу» области, чтобы продолжить»), имея полную директиву и html, желательно в демо, помог бы мне или кому-то устранить неполадки. Я обновлю это, если будет предоставлена ​​​​дополнительная информация.

Марк Райкок отлично объяснил различия между ссылками и контроллерами здесь: Разница между функциями "контроллер", "ссылка" и "компиляция" при определении директивы

person Brian    schedule 27.05.2016
comment
Спасибо за предупреждение об ошибке. попробую сценарий - person KArneaud; 28.05.2016
comment
Если я использую функцию ссылки... должен ли я использовать $rootScope в функции ссылки для прослушивания событий, сгенерированных из $scope основного контроллера (не директивного контроллера)? - person KArneaud; 28.05.2016
comment
Мне нужно знать больше о коде, чтобы ответить, но предлагаю прочитать это, автор хорошо объясняет события: toddmotto.com/. - person Brian; 28.05.2016
comment
обновил вопрос, чтобы отразить код. пришлось немного разобрать - person KArneaud; 28.05.2016
comment
Итак, я думаю (без тестирования кода), что вы должны иметь возможность изменить $scope.$emit на $scope.$broadcast и слушать это. $emit отправит вверх, так что вам определенно придется слушать $rootScope. Для меня это всегда метод проб и ошибок. - person Brian; 28.05.2016