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()"
Related
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.
Html:
<a href id="link "ng-click="print(arg)"> print </a>
Angularjs controller:
$scope.return_promise =function(arg){
return $http.post('\path');
)};
$scope.print = function(arg){
url ="other/path/"
$scope.return_promise(arg).then(function(r){
if(r){
$('#link').attr('href', url);
});
};
Problem: I checked with chrome debugger, the href actually updated, but the event doesn't trigger (i.e. not go to the url). If I click it again, it works.
If I add a statement document.getElementById('#link').click() at the end of if clause, it will prompt an error "digest cycle is in progress"
How can i solve this.
Not sure if I get your question. First, check if the code you paste is the code you wanted add here, because it has numerous errors. If you would like to replace dynamically href attribute do it like so:
<div ng-controller="SomeCtrl as ctrl">
print
</div>
(function () {
'use strict';
angular
.module('module')
.controller('SomeCtrl', SomeCtrl);
SomeCtrl.$inject = ['$scope'];
function SomeCtrl($scope) {
var vm = this;
vm.url = "#";
vm.return_promise = function (arg) {
return $http.post('/path');
};
vm.print = function (arg) {
var url = "other/path/";
vm.return_promise(arg).then(function (r) {
if (r) {
vm.url = url;
}
});
};
}
}());
I have ng-click method showSchedules() that calls AJAX:
$scope.showSchedules = function () {
$scope.loadCalendar = true;
appointmentService.getSchedule().then(function (response) {
calendarService.set(response.data.calendar, function () {
$timeout(function () {
$scope.refleshCalendars();
$scope.loadCalendar = false;
console.log($scope.events);
}, 100);
});
});
};
Inside this method you can see: console.log($scope.events);
It gives me filled array by objects.
When I do {{events}} in trmplate HTML I get [].
Why I get empty array?
HTML code:
<div ng-controller="ScheduleController as vmx">
{{events}}
<mwl-calendar
events="events"
view="vmo.calendarView"
view-title="vmo.calendarTitle"
current-day="vmo.calendarDay"
on-event-click="vmo.eventClicked(calendarEvent)"
on-event-times-changed="vmo.eventTimesChanged(calendarEvent);
calendarEvent.startsAt = calendarNewEventStart;
calendarEvent.endsAt = calendarNewEventEnd"
auto-open="true"
day-view-start="06:00"
day-view-end="23:00"
day-view-split="30"
cell-modifier="vmo.modifyCell(calendarCell)">
</mwl-calendar>
</div>
You want {{vmx.events}} because you are using the controller as annotation
Using controller as makes it obvious which controller you are
accessing in the template when multiple controllers apply to an
element.
ngController documentation (Search for controller as)
I am having trouble trying to get Angular to spit out the url of the page in to the page class each time the navigation changes the page. This is what I have so far:
$scope.currentPage = getCurrentPage;
var getCurrentPage = function () {
var login = 'login';
var url = $location.url().substring(1);
if (url = null || url = undefined) {
return login;
} else {
return url;
}
};
I have this on the content wrapping <div>:
<div class="" ng-controller="AppCtrl" ng-class="currentPage + 'Page'"></div>
Any hardcore Angulars out there? Please help.
JP
A few things to do differently:
I don't think the function is actually getting called, so:
$scope.currentPage = getCurrentPage();
$scope.currentPage += "Page"; // just keeping the concatenation out of the markup
EDIT: I think I'm wrong about the above statement. I'm still fuzzy on when to call() vs reference the function in situations like this...
Also, this line needs some retouching of the operators:
if (url == null || url === undefined);
And, I am not sure ng-class is entirely necessary in this case. It is usually used to evaluate an expression. I would simply use:
<div class="" ng-controller="AppCtrl" class="{{currentPage}}"></div>
Hopefully someone else can verify me on all of these points, as I am fairly new to JS and AngularJS.
For anyone who comes across this and would like a more verbose answer, here you go!
In view:
<div class="" ng-controller="AppCtrl" class="currentPage"></div>
In controller:
$scope.$watch(function () {return $location.url();}, function () {
var getCurrentPage = function () {
var login = 'loginPage';
var currentUrl = $location.url().substring(1);
if (currentUrl === '' || currentUrl === undefined) {
return login;
} else {
return currentUrl + 'Page';
}
};
$scope.currentPage = getCurrentPage();
console.log($scope.currentPage);
});
I have a page where I can't modify HTML. I can only attach angular modules to it.
Page contains uibAccordion, with "close-others" set to "true". I need to somehow set it to "false".
<uib-accordion close-others="true">
The only way that came to my mind was to use a Decorator, but I don't know how to modify the attribute:
angular.module('guide', ['ui.bootstrap'])
.config(['$provide', Decorate]);
function Decorate($provide) {
$provide.decorator('uibAccordionDirective', ['$delegate', function($delegate) {
$delegate[0].closeOthers = function(openGroup) {
var closeOthers = false;
};
return $delegate;
}]);
}
Can anyone suggest how to accomplish this?
Should be able to modify the function https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js:
...
$delegate.closeOthers = function(openGroup) {
var closeOthers = false;
// var closeOthers = angular.isDefined($attrs.closeOthers) ?
// $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
if (closeOthers) { // Obviously you can remove this whole line
angular.forEach(this.groups, function(group) {
if (group !== openGroup) {
group.isOpen = false;
}
});
}
};
return $delegate;
https://docs.angularjs.org/guide/decorators#what-are-decorators-
Patch the $Delegate section - it replaces the someFn like you want to replace the closeOthers.