In Angular have a toggle function that works as expected but as the page refreshes the toggle state is not sustained
Objective : Sustain Toggle State on page refresh
$scope.toggle = !$scope.toggle;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Guess The Year!' : 'Reveal The Year';
})
//HTML
<div> ng-show="toggle">Reveal </div>
<div> ng-hide="toggle">Hide </div>
I think you should go with local storage to overcome this problem
Here is some code it may help you
().controller('asdad', [function() {
//default setting
$scope.toggle = localStorage.toggle !== undefined ? JSON.parse(localStorage.toggle) : YourDefaultValue;
//change state function
$scope.stateFun = function() {
$scope.toggle = !$scope.toggle;
$scope.$watch('toggle', function(){
localStorage.toggle = $scope.toggle;
$scope.toggleText = $scope.toggle ? 'Guess The Year!' : 'Reveal The Year';
})
};
}]);
On refresh of the page the controller is called again and hence all the scope variables are also initialised again.
If you want to sustain its value place value in localStorage.
Related
Currently am working with angularjs.
now i have an ng-click function,it is called when checkbox is checked or unchecked. i have a full page loader and when i click on the check box it will be displayed. It will be hidden only after loading the complete view. I tried this code and it is not working
here comes the click
<input type="checkbox"id="myId" ng-click="sampleClick(1)">
here is the js code
$scope.sampleClick = function(type) {
var param = new Object();
param.type = type;
//side bar listing
Data.post('url/testurl', param).then(function(data){
$scope.all = '';
$scope.all = angular.fromJson(data);
console.log("Contents is trying to load.");
$scope.$on('$viewContentLoaded',function(event, viewConfig){
console.log("Contents did load.");
$rootScope.setVariable = 1;
});
}, function (error) {
$rootScope.setVariable = 1;
});
}
I want to set the $rootScope.setVariable = 1 only when the view section is completely loaded.(and each time when I click on the check box)
Note : when I use $viewContentLoaded at the time of page load, it works without any issue. But when I use the same along with the ng-click function, i don't get any response.
If the view is rendered using ng-repeat, why can't you use ng-repeat directive to handle the end of render and then initiate a function call.
for example
<div ng-repeat="i in things" repeat-done>
// here you use i to render your filter with checkbox
</div>
and directive will look like
app.directive('repeatDone', function($rootScope) {
return function(scope, element, attrs) {
if (scope.$last){
//set your variables or do you job
}
};
})
You can set one flag you can set it value true/false.
for example(I am taking your example so you can understand it batter):-
$scope.loading = false;
$scope.sampleClick = function(type) {
var param = new Object();
param.type = type;
//side bar listing
Data.post('url/testurl', param).then(function(data){
$scope.all = '';
$scope.all = angular.fromJson(data);
console.log("Contents is trying to load.");
$scope.loading = true;
$scope.$on('$viewContentLoaded',function(event, viewConfig){
$scope.loading = false;
console.log("Contents did load.");
$rootScope.setVariable = 1;
});
}, function (error) {
$rootScope.setVariable = 1;
});
}
here i have take $scope.loading variable which default value is false, when you click on checkbox then it will be set to true so at that time you can show the loader and when it get the data it will be set to false so it will stops loading.
I hope you understand.
I have implemented google Captcha in my angularjsApp.
I have this HTML
<div class="g-recaptcha" data-sitekey="{{key}}" data-callback="enableBtn()"></div>
And in my controller I have:
$scope.enableBtn = function(){
$scope.captchaSigned = true;
};
$scope.key = "xyz";
But not working and in my console return :
ReCAPTCHA couldn't find user-provided function: enableBtn()
How can I make a data-callback with Angularjs?
In your html put :
<div class="g-recaptcha" data-sitekey="{{key}}" data-callback="enableBtn"></div>
And in your controller, put :
var enableBtn = function(){
$scope.captchaSigned = true;
};
$scope.key = "xyz";
window.enableBtn = enableBtn;
This should work as it will bind the function in controller.
I have resolved with this library https://github.com/VividCortex/angular-recaptcha
In Controller :
window.wrongCaptchaResponse = true;
window.recaptchaResponse = function(key) {
window.wrongCaptchaResponse = false;
};
In HTML page:
<button type="submit" ng-disabled="loginForm.$invalid || wrongCaptchaResponse">Login</button>
You can initialize recaptcha in your angular controller. eg.
inside your controller add this on a button click or initialize or timeout if you need it on page load. :
function showRecaptcha(){
if(typeof grecaptcha !='undefined'){
grecaptcha.render('register-recaptcha', {
'sitekey' : 'your_site_key',
'callback' : recaptchaCallback,
});
}
}
function recaptchaCallback(resp){
console.log(11,resp);
}
<div id="register-recaptcha"></div>
instead of $scope.enableBtn = function(){ define your function as window.enableBtn = function(){
Ensure you use data-callback="enableBtn" and NOT data-callback="enableBtn()"
Scrollable content inside ng-show element forgets the scroll position in Internet Explorer but not in Firefox.
Run the Plunker to describe the issue in Internet Explorer and Firefox. You get different results.
Anyone know why?
I can suggest the following workaround - Save the state of the position on the controller and use it to reset the location:
$scope.position = "top"; // Default location of the list
$scope.show = true;
$scope.gotoBottom = function() {
$location.hash('bottom');
$scope.position = "bottom"; // save the current position
$anchorScroll();
};
$scope.gotoTop = function() {
$location.hash('top');
$scope.position = "top"; // save the current position
$anchorScroll();
};
$scope.toggleShow = function() {
$scope.show = !$scope.show;
if( $scope.position == "bottom" ) { // If position is "bottom" call "$scope.gotoBottom()" to reset the position
$timeout(function() { // The code is inside "$timeout" to allow the view to render before updating the location
$scope.gotoBottom();
});
}
};
And on the view, change how you showing/hiding the list:
<button ng-click="toggleShow()">{{show ? 'Show' : 'Hide'}}</button>
And don't forget to inject $timeout into your controller:
.controller('ScrollController', ['$scope', '$location', '$anchorScroll', '$timeout',
function ($scope, $location, $anchorScroll, $timeout) {
Here is a working example - http://plnkr.co/edit/oXKpmwQtV8ICRvGNeQby?p=preview
Solved using css visibility : hidden instead of ng-show clue from #Alon Etian's link IE10 reset the scrollbars (position to top-left) for a block (overflow:auto) after {display:none, display:block} sequence in his comment.
Plunkr that solves this
I have a button on this button click I am calling a function e.g
<button ng-Click=”getData()”></button>
<div class=”Progressbar” ng-show=” showProgress “></div>
controller:
$scope.showProgress = false;
$scope.getData = function () {
$scope.showProgress = !$scope.showProgress;
myRepository.getAllData();
}
This function is taking longer time to fetch data from Database.
I want to show a SPINNER while data is getting fetched.
But this “Div” is shown only after whole function has been completed.
I want it to be shown before the completion of function.
How I can achieve that?
Set showProgress = true before loading data, and to false once data is loaded. For reliable behavior make myRepository.getAllData return promise, and then use its then method to hide spinner:
$scope.getData = function() {
$scope.showProgress = true;
myRepository.getAllData().then(function() {
$scope.showProgress = false;
});
}
I am building a small message system. I use tabs in my state (inbox, outbox). Also, i want to sent a message when i click a "contact" link. If i click that link, this should happen:
change state to messages state
open other tab, called "newmsg"
At this moment, this is what i have:
<a ng-click="mailContact()">contact</a>
and i my controller:
$scope.mailContact = function() {
$state.go('root.messages');
$scope.openTab('new');
};
Obviously this is not working, because $scope.openTab('new'); will never execute. The state changes to what i want, but the tab is not opened. I do not have a clue of how to get it done.
Ok, stupid thing was i had an init which opened the "inbox"...
Now i wrote a service which does the trick.
app.factory('msgTabService', ['$rootScope', function($rootScope) {
var msgTabService = {};
var tabname = "inbox";
msgTabService.set = function(tab) {
tabname = tab;
};
msgTabService.get = function() {
return tabname;
};
msgTabService.openTab = function(tab) {
if ($rootScope.currenttab !== tab)
{
$rootScope.currenttab = tab;
msgTabService.set(tab);
}
};
return msgTabService;
}]);
The question may be similar to: Save State of Tab content when changing Route with angularjs and BootStrap Tabs