Question

我有一个主控制器，我想在其中发出/广播一个事件

主控制器

.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-repeat个项目的指令，每个项目都有一个独立的范围，它与主控制器的唯一连接是范围的模型

指令

.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>

我希望控制器中的上述事件触发对一个或多个项目DOM元素的一系列dom操作

我面临的困境是，我不确定如何/在哪里构建逻辑来听取所述事件并继续执行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 */}); }

此外，我需要访问隔离范围的“tile”对象和指令的“元素”，以便继续进行dom操作。

Answer 1

看起来你错过了完成提交问题，但简而言之，DOM元素的操作应该是链接的。

根据你开始在底部写的内容（'另外我需要访问范围的“tile”对象和“元素”以继续'），具有完整的指令和html，最好是一个演示，可以帮助自己或有人排除故障。如果提供更多信息，我会更新。

Mark Rajcok在这里解释了链接和控制器之间的差异做得非常出色：Difference between the 'controller', 'link' and 'compile' functions when defining a directive

主控制器和指令/指令控制器之间的通信

1 个答案: