主控制器和指令/指令控制器之间的通信
communicating between main controller and directive/ directive controller
我有一个主控制器,我想在其中发出/广播一个事件
主控制器
.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) 或者在 link
return {
restrict: 'A',
scope: {
tile: '=ngModel'
}, link: function(scope, element, attr){ scope.$on('move', function(){ /* manipulate dom element */}); }
此外,我需要访问隔离作用域的 "tile" 对象和指令的 "element" 以便继续进行 dom 操作。
您似乎错过了提交问题的时间,但是,简而言之,对 DOM 个元素的操作应该在 link.
中
根据您在底部开始写的内容('此外,我需要访问范围的 "tile" 对象和 "element" 才能继续进行'),具有完整指令和 html,最好是在演示中,可以帮助我自己或其他人进行故障排除。如果提供更多信息,我会更新此信息。
Mark Rajcok 在此处出色地解释了 link 和控制器之间的区别:Difference between the 'controller', 'link' and 'compile' functions when defining a directive
我有一个主控制器,我想在其中发出/广播一个事件
主控制器
.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) 或者在 link
return {
restrict: 'A',
scope: {
tile: '=ngModel'
}, link: function(scope, element, attr){ scope.$on('move', function(){ /* manipulate dom element */}); }
此外,我需要访问隔离作用域的 "tile" 对象和指令的 "element" 以便继续进行 dom 操作。
您似乎错过了提交问题的时间,但是,简而言之,对 DOM 个元素的操作应该在 link.
中根据您在底部开始写的内容('此外,我需要访问范围的 "tile" 对象和 "element" 才能继续进行'),具有完整指令和 html,最好是在演示中,可以帮助我自己或其他人进行故障排除。如果提供更多信息,我会更新此信息。
Mark Rajcok 在此处出色地解释了 link 和控制器之间的区别:Difference between the 'controller', 'link' and 'compile' functions when defining a directive