It's a basic question as I'm beginner in both Cordova and AngularJS.
I have an application with Cordova and AngulaJS and I want to check network connectivity using cordova-plugin-network-information in an angular way.
The below code works fine:
var app = angular.module('CordovaPluginTest', []);
app.run(['$rootScope', function ($rootScope) {
document.addEventListener('deviceready', function () {
document.addEventListener('online', toggleCon, false);
document.addEventListener('offline', toggleCon, false);
if (navigator.connection.type == Connection.NONE)
$rootScope.$apply(function () { $rootScope.isOnline = false; });
else
$rootScope.$apply(function () { $rootScope.isOnline = true; });
}, false);
function toggleCon(e) {
if (e.type == 'online')
$rootScope.$apply(function () { $rootScope.isOnline = true; });
else if (e.type == 'offline')
$rootScope.$apply(function () { $rootScope.isOnline = false; });
}
}])
But the below one does not work:
var app = angular.module('CordovaPluginTest', []);
app.run(['$rootScope', function ($rootScope) {
$rootScope.$on('deviceready', function () {
$rootScope.$on('online', function () { $rootScope.isOnline = true; });
$rootScope.$on('offline', function () { $rootScope.isOnline = false; });
if (navigator.connection.type == Connection.NONE)
$rootScope.isOnline = false;
else
$rootScope.isOnline = true;
});
$rootScope.$watch('isOnline', function (val) { alert('watch isOnline:'+val);})
}])
Why defining angular event listener doesn't work? In fact it doesn't get the event at all!
What is the correct way of doing this in angular?
For document DOM element Angular uses a wrapper ($document) and to bind relating events it relies on jQuery/jqLite.
So you can use $document.on("event-type",function( event ){ ... }); or angular.element(document).bind("event-type",function( event ){ ... }); to attach an handler to document.
But surely you can't use $rootScope.$on to listen to an event attached to document element.
Try this:
app.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$rootScope.$apply(function() {
$rootScope.online = false;
// $window.location.reload();
});
}, false);
$window.addEventListener("online", function () {
$rootScope.$apply(function() {
$rootScope.online = true;
// $window.location.reload();
});
}, false);
});
And add network information plugin in cordova
Related
I was looking at this article to apply header menu with dropdowns in my mvc5 knockoutjs solution.
https://jdmdigital.co/news/codex/bootstrap-3-secondary-dropdown-menu/
The frontend it looks nice, and it is ok in my solution, however, I cant figure it out how to bind js section to work.
Now when I click on my dropdown parent item, nothing happens, because the js code is not working.
here is my setup of the js (knockoutjs) file.
define(['durandal/system', 'plugins/router', 'durandal/services/logger', 'knockout', 'common', 'plugins/dialog', 'durandal/binder', 'fastclick'],
function (system, router, logger, ko, common, dialog, binder, fs) {
var shell = {
activate: activate,
router: router,
};
// Make Dropdown Submenus possible
$('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function (e) {
$('.dropdown-submenu ul').removeAttr('style');
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
// Clear Submenu Dropdowns on hidden event
$('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
$('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
});
//...
//...
//OTHER INIT METHODS (not in the scope for this question)
//#region Internal Methods
function activate() {
var result = registerRoutes();
//setRouteGuard();
if (window.cordova) {
window.document.addEventListener("deviceready", function () {
shell.refreshUserData(true);
shell.changeLanguage();
});
} else {
shell.refreshUserData(true);
shell.changeLanguage();
}
shell.isLoading.subscribe(function (newValue) {
//if something gone wrong
if (newValue) {
setTimeout(function () {
//shell.isLoading(false);
}, 10000);
}
});
if (router.activeInstruction().config.moduleId == "viewmodels/parentschedule") {
if (shell.isAnonymousUser() == true) {
shell.isClient(false);
shell.isEmployee(false);
}
else {
shell.isClient(true);
shell.isEmployee(true);
}
//console.log("test");
}
return result;
}
function route(r, moduleId, name, visible, alwaysVisible, role, condition) {
var self = this;
self.route = r;
self.moduleId = moduleId;
self.title = name;
self.visible = visible;
self.nav = true;
self.role = role;
self.condition = condition;
self.mouseover = ko.observable(false);
self.onhover = function () {
self.mouseover(!self.mouseover());
};
self.goToPage = function () {
router.navigate(this.hash);
};
self.alwaysVisible = alwaysVisible;
self.isTouched = ko.observable(false);
self.setTouched = function () {
self.isTouched(true);
return true;
}
self.setUnTouched = function () {
setTimeout(function () {
self.isTouched(false);
}, 200);
return true;
}
self.isActiveMenuItem = ko.computed(function () {
return router.activeInstruction() &&
router.activeInstruction().fragment.indexOf(self.route) > -1
});
return self;
}
//#endregion
});
I've set the following watcher in my controller:
var embeds = {twitter: false, facebook: false};
$scope.$watch(embeds, function(newVal, oldVal) {
if(embeds.twitter && embeds.facebook) $scope.loading = appLoader.off();
});
This should fire when embeds changes. I have the following functions that check if all my embedded Tweets and Facebook posts have loaded for the page. When all Tweets or Facebook posts are loaded, it updates embeds within a $timeout block in order to trigger a digest cycle.
checkFBInit();
twttr.ready(function(twttr) {
twttr.events.bind('loaded', function(event) {
$timeout(function() {
embeds.twitter = true;
});
});
});
function checkFBInit() {
// Ensure FB.init has been called before attempting to subscribe to event
var fbTrys = 0;
function init() {
fbTrys++;
if (fbTrys >= 60) {
return;
} else if (typeof(FB) !== 'undefined') {
fbTrys = 60;
FB.Event.subscribe('xfbml.render', function() {
$timeout(function() {
embeds.facebook = true;
});
});
return;
} else {
init();
};
};
init();
};
The problem I'm having is that my watcher only fires once when I set it. I've tried binding embeds to $scope and/or watching embeds.twitter and embeds.facebook but the watcher only ever fires once.
Use:
$scope.embeds = {twitter: false, facebook: false};
$scope.$watch('embeds', function(newVal, oldVal) {
if ($scope.embeds.twitter && $scope.embeds.facebook) {
$scope.loading = appLoader.off();
}
}, true);
See https://docs.angularjs.org/api/ng/type/$rootScope.Scope. First argument must be string or function which return the name of param.
I am using this code to check the Internet end user.
myapp.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$rootScope.$apply(function() {
$rootScope.online = false;
});
}, false);
$window.addEventListener("online", function () {
$rootScope.$apply(function() {
$rootScope.online = true;
});
}, false);
});
I have a div on my page that way. By default it is as display:none;
<div id="connec_failed">...</div>
How do I display this div starting the code that checks the internet if the result return false?
How to hide the div again when the result returns true?
Use ng-hide: if online
<div id="connec_failed" ng-hide="online">...</div>
Trying to change the scope value, but not updated
Js File
$scope.$watch('match.Type', function (newValue) {
if ($scope.match.Type === 'NIGHT') {
$scope.value = false;
} else {
$scope.value = true;
}
});
Jasmine
it('should watches match type function', function() {
scope.match= {};
scope.match.Type = '';
describe('DAY', function() {
beforeEach(function() {
scope.match.Type = 'DAY';
scope.$digest();
});
it('DAY', function () {
expect(scope.value).toBe(true);
});
});
describe('NIGHT', function() {
beforeEach(function() {
scope.match.Type = 'NIGHT';
scope.$digest();
});
it('NIGHT', function () {
expect(scope.value).toBe(false);
});
});
})
;
Only one value updated, not the second value updated
I am for jasmine code and angularjs
Please help me to solve this problem
I want change event drag and drop, to click event for my objects.
I try this code
$("a").draggable({
start: function (event, ui) {
$(this).trigger("click");
}
});
But not work :(
UPDATE:
I try this code:
document.ondragstart = function () {
return false;
};
document.onmouseup = function (a, b) {
$(this).trigger("click");
};
But trigger click still not work
Try with this modification:
$("a").draggable({
start: function (event, ui) {
$(--your-button-element-here-).click();
}
});
I found just such a solution
var url = null;
$("a").mousedown(function () {
url = $(this).attr("href");
$(window).mousemove(function () {
$(window).unbind("mousemove");
});
});
$(window).mouseup(function () {
$(window).unbind("mousemove");
if (url != null) {
location.href = url;
}
});