I added the angular-block-ui module to my Angular project but it was not blocking the UI automatically during my ajax requests.
So, I tried to use it manually and it shows the block screen but it does not dismiss it.
So, I did a more simple test, just showing the block and trying to stop it after 2 seconds, and same issue. The screens gets blocked but it does not go away.
Here is my code:
'use strict';
myApp.controller('LoginModalCtrl', function ($scope, blockUI) {
$scope.login = function () {
console.log("on submit");
blockUI.start();
setTimeout(function(){
//do what you need here
blockUI.stop();
console.log("finished")
}, 2000);
}
})
;
Any idea what I am doing wrong?
You need to wrap it in a $scope.apply
$scope.$apply(function () {
blockUI.stop();
});
All this "blocking" consist of putting div on top of your page. Thats it.
Well it works: http://plnkr.co/edit/HjXcgQD7JghFjtsOAEo0?p=preview
You should use $timeout, not setTimeout.
Dont want to go into details, but it doesnt seem to be that smart library thow...
You should use $timeout, not setTimeout.
'use strict';
myApp.controller('LoginModalCtrl', function ($scope, blockUI, $timeout) {
$scope.login = function () {
console.log("on submit");
blockUI.start();
$timeout(function(){
//do what you need here
blockUI.stop();
console.log("finished")
}, 2000);
}
})
Related
I did this below to detect back button hit to previous page, but the detection is working fine, my headache is that the app run functions variable $rootScope.UseInController don't pass the data once to controller.
Here is the script.
App.run(function($rootScope, $location, $route, $localStorage){
$rootScope.$on('$locationChangeStart', function() {
$rootScope.$on('$locationChangeSuccess', function() {
// Check if you've been here before.
$rootScope.actualLocation = $location.path();
});
});
$rootScope.$watch(
function() {
return $location.path();
},
function(newLocation, oldLocation){
if($rootScope.actualLocation === newLocation) {
$rootScope.backClicked = true;
}
},true);
})
Please help me out....
This is what i finally does and make it worked perfectly, i delay my controller a bit.
$timeout(function(){..}, 5);
I have to store closingtime after closing of tab and browser.that closing time should be stored in localstorage in angularjs.
I am using $localStorage and $window directive.
You can use... beforeunload
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return "Do you really want to close?";
});
});
With pure JS
window.addEventListener("beforeunload", function (e) {
});
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM%2FMozilla_event_reference%2Fbeforeunload
You can use onunload and onbeforeunload events to handle this but with the condition that they will fire even while navigating to other sites on clicking links
angular
.module('app', [])
.controller('AppController', function ($localStorage, $window) {
$window.onunload = function () {
$localStorage.setItem('LastLoggedOutTime', new Date());
}
});
angular.module('app', [])
.controller('exitController', function($scope, $window) {
$scope.onExit = function() {
// your function
};
$window.onbeforeunload = $scope.onExit;
});
I am new using angular material and i have a question about the possibility to put a sidenav modal,
Today i tried to use the sidenav it works perfectly but i need another option, i want to disallow the closure of this sidenav using 'esc' from keyboard or clicking out the sidenav.
Here is an exemple with the sidenav by default.
CODEPEN EXAMPLE
//Javascript : from codepen
angular.module('MyApp').controller('AppCtrl', function ($scope,$timeout, $mdSidenav, $mdUtil, $log) {
$scope.toggleRight = buildToggler('right');
/**
* Build handler to open/close a SideNav; when animation finishes
* report completion in console
*/
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$log.debug("toggle " + navID + " is done");
});
},300);
return debounceFn;
}})
.controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
backdrop : 'static',
$scope.close = function () {
$mdSidenav('right').close()
.then(function () {
$log.debug("close RIGHT is done");
});
};
});
I found "backdrop:static" and "keyboard:false" options but it doesn't work. Or i don't know how to do it.
If somebody know a solution it will be cool !
You can set the md-is-locked-open attribute after the sidenav is opened. E.g. use a scope flag in your event handler:
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$scope.isLockedOpen = true;
});
},300);
...
and then in your template use sth like
<md-sidenav class="md-sidenav-right" md-component-id="right" md-is-locked-open="isLockedOpen">
sorry for making an answer that late ...
I just forgot two braces in the last code line :
},300); become },300)();
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function(){
$mdSidenav(navID)
.toggle()
.then(function () {
$scope.isLockedOpen = true;
});
},300)();
I have a problem.
.controller('A_Ctrl', function($scope){
$scope.getdata = function(){
console.log("ok");
}
})
I want to execute the function $scope.getdata() when view change by this view each time.
But this function is executed only once when change view by this view at first time.
My suggestion is possible in angularjs?
You forget to call the function, add the following sentence:
$scope.getdata();
Another solution: wrap it in a $rootScope and use a $location if you
want more control and based on the url you can
call getdata() or not.
var app = angular.module('app', [])
.run(function($rootScope, $location) {
$rootScope.$on('$routeChangeStart', function() {
$rootScope.getdata();
});
})
.controller('A_Ctrl', function($rootScope){
$rootScope.getdata = function(){
console.log("ok");
};
$rootScope.getdata(); //----- missed line
});
But I recommend the first approach.
Make the function self-executing.
($scope.getdata = function(){
console.log("ok");
})();
I'm attempting to set up a watch in AngularJS and I'm clearly doing something wrong, but I can't quite figure it out. The watch is firing on the immediate page load, but when I change the watched value it's not firing. For the record, I've also set up the watch on an anonymous function to return the watched variable, but I have the exact same results.
I've rigged up a minimal example below, doing everything in the controller. If it makes a difference, my actual code is hooked up in directives, but both are failing in the same way. I feel like there's got to be something basic I'm missing, but I just don't see it.
HTML:
<div ng-app="testApp">
<div ng-controller="testCtrl">
</div>
</div>
JS:
var app = angular.module('testApp', []);
function testCtrl($scope) {
$scope.hello = 0;
var t = setTimeout( function() {
$scope.hello++;
console.log($scope.hello);
}, 5000);
$scope.$watch('hello', function() { console.log('watch!'); });
}
The timeout works, hello increments, but the watch doesn't fire.
Demo at http://jsfiddle.net/pvYSu/
It's because you update the value without Angular knowing.
You should use the $timeout service instead of setTimeout, and you won't need to worry about that problem.
function testCtrl($scope, $timeout) {
$scope.hello = 0;
var t = $timeout( function() {
$scope.hello++;
console.log($scope.hello);
}, 5000);
$scope.$watch('hello', function() { console.log('watch!'); });
}
Or you could call $scope.$apply(); to force angular to recheck the values and call watches if necessary.
var t = setTimeout( function() {
$scope.hello++;
console.log($scope.hello);
$scope.$apply();
}, 5000);
You can use without $interval and $timeout
$scope.$watch(function() {
return variableToWatch;
}, function(newVal, oldVal) {
if (newVal !== oldVal) {
//custom logic goes here......
}
}, true);
It can also happen because the div is not registered with the controller. Add a controller to your div as follows and your watch should work:
<div ng-controller="myController">