Hi all!
I want to display a button if no full screen mode set. I'm using screenfull
library for this (https://github.com/sindresorhus/screenfull.js/).
It works perfectly using interval in JS - I can check if button should be
displayed or not (in real code I have two buttons for entering / exiting
full screen mode as toggle, but for this example I've simplified it to only
one button).
I moved this implementation to AngularJS's (v1.3.9 and v1.4.1 tested)
controller using ng-show directive and ng-show seems to works, but
unfortunately not when I'm entering / exiting full screen mode but only
when I'm changing a model (I will write about it in a moment). Note: I can
exit full screen mode by pressing ESC or some button on a mobile phone, so
I don't want to map every user's action. Ng-show should be a solution to
check screen mode.
So, when I'm switching between screen modes - ng-show directive is
"sleeping". If I will change something in model, then ng-show will react,
but I will show some example on the end of this post, for now let's see how
I've implemented that.
I set ng-show this way:
<button class="full-screen-mode" data-ng-show="!isFullScreen()"></button>
Clicking the button will enter to full screen mode:
$('.full-screen-mode').click(function() {
if (screenfull.enabled) {
screenfull.request($('.wrapper')[0]);
}
});
I'm injecting screenfull library as factory (I was trying also with
injecting a service, but no luck either with final effect):
var screenfullLibraryApp = angular.module('screenfull', []);
screenfullLibraryApp.factory('screenfull', function() {
return screenfull;
});
var app = angular.module('app', ['screenfull']);
app.controller('MainCtrl', ['$scope', 'screenfull', function ($scope,
screenfull) {
var lastFullscreen = false; // just for test purposes...
$scope.isOk = function() {
return $scope.yourName === '1';
};
$scope.isFullScreen = function() {
if (screenfull.isFullscreen !== lastFullscreen) { // condition for
test purposes...
lastFullscreen = screenfull.isFullScreen;
console.log('switch! ' + (lastFullscreen === true ? 'true' :
'false'));
}
return screenfull.isFullscreen === true;
};
}]);
So, this code won't work but I've noticed, that ng-show will actually react
when I will change model, e.g. when I will enter some value to input like
that:
<input type="text" data-ng-model="textField">
Then ng-show will switch this button and will output this: console.log('switch!
' + (lastFullscreen === true ? 'true' : 'false')); that many times, I've
clicked on full screen / exit full screen! So, it seems to work, but
something's wrong with screenfull library injected as factory / service, or
maybe this is some kind of AngularJS behaviour I have no knowledge about.
Please help me to understand, what I'm doing wrong?
Thanks in advance!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
