I have been troubleshooting a similar issue and I can't seem to figure out why the update is not reflecting in the view. While I am able to see the scope variable updating in the catch events logs, the changes are not being displayed in the view. For example, it shows "test" initially but does not change when $scope.keyPressed is updated.
the directive
app.directive('keypressEvents', [
'$document',
'$rootScope',
function($document, $rootScope) {
return {
restrict: 'A',
link: function() {
$document.bind('keypress', function(e) {
console.log('Got keypress:', e.which);
$rootScope.$broadcast('keypress', e);
$rootScope.$broadcast('keypress:' + e.which, e);
});
}
};
}
]);
the controller
$scope.keyPressed = 'test';
$scope.$on('keypress:13', function(onEvent, keypressEvent) {
$scope.keyPressed = 'Enter';
console.log($scope.keyPressed);
});
$scope.$on('keypress', function(onEvent, keypressEvent) {
if (keypressEvent.which === 120) {
$scope.keyPressed = 'x';
} else {
console.log('else' ,keypressEvent);
$scope.keyPressed = 'Keycode: ' + keypressEvent.which;
}
});
the view
<div data-keypress-events>
{{keyPressed}}
</div>
The controller for the view is determined by the route provider when it loads the partial.
.when('/feed/:url', {
templateUrl: '/templates/eventWall-feed',
controller: 'eventWallFeedController'
})