I have applied with reCAPTCHA as follows: angularJS
<div class="captcha-box">
<div class="g-recaptcha" data-sitekey="<site-key>" g-recaptcha-response="gRecaptchaResponse" control="captchaControl"></div>
</div>
<div class="result"></div>
But I am confused what to do in the certified value reCAPTCHA To give handled through a directive.
How can that will send the results of the field in the result reCAPTCHA?
Related
We have multiple pages in sites using angular JS. I added this recaptcha in first page, first page works fine, come back with success response and goes to second page. In the second page, I haven't added this recaptcha at all, but it says validation fails in the second page. When I debug, the form validation is set to false and it mentions the page cannot be saved. The problem is that we can't get into the next page from second page. We use angular JS 1.2.28
I have done server side validation using apex class, it does validate in first page and goes to second page. However, second page gets blocked by missing fields in the form. Here is the code I added in angular JS for first page if that helps. I have a screenshot of the form where it says invalid. I will try to attach that too. I am stuck with this issue for many days now.
<div class="container">
<div class="row">
<div class="col-xs-12 form-group">
<div vc-recaptcha ng-required="true" name="recaptcha" ng-model="applicant.myRecaptchaResponse" key="'xxxxxxx'">
</div>
<div ng-if="form.showAllErrors">
<p class="help-block text-danger" ng-if="form.recaptcha.$invalid">Please check this option.</p>
</div>
</div>
</div>
</div>
I am quite new to Angular, but I have successfully set up a list.html template to show posts in Wordpress using V2 of the WP API.
Now, I would like to show some (ACF) fields from another page above my post list. I have the ACF API plugin installed as well, and it does work for posts.
I just have no idea how to refer to the right page ID, or if I need to set up another controller for this.
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
As you can see ":2" probably makes no sense, but I could not find any reference on how to do this properly.
Thanks in advance for any help!
btw. this is the full code from my list.html template/partial:
<!-- try to get data out of page id 2 > http://www.example.com/wp-json/acf/v2/page/2 -->
<h1 ng-bind-html="pages:2.acf.title">not working...yet...</h1>
<div class="post-list">
<article ng-repeat="post in posts | orderBy:'date'" class="col-md-2">
<div>
<div class="date-wrap">
<h6 class="event-date">{{post.title.rendered}}</h6>
</div>
<!-- <div ng-bind-html="post.content.rendered | to_trusted"></div> -->
<div ng-if="post.acf.event_title">
<div class="post-data-container">
<p>{{post.acf.event_title}}</p>
<p ng-if="post.acf.conversation_with">A conversation with {{post.acf.conversation_with}}</p>
<p>{{post.acf.about_or_by}} {{post.acf.lecture_from}} </p>
</div>
<img ng-src="{{post.acf.portrait.sizes.thumbnail}}" />
</div>
<div ng-if="!post.acf.event_title">No Event Title</div>
<a ui-sref="detail({id: post.id})">Click here to read more</a>
</div>
</article>
</div>
Are you grabbing the ACF data from the OTHER post? Is it part of your JSON object that returns to the view? If it is, you would just point to that. To verify it is, go to yourdomain.com/posts/:id where id is the post you are viewing, and see if the OTHER post's ACF data is present.
If not you'll need to create a controller or another function which hits the API again for that other post's data, so $scope.other_post = getPost({id:OtherPostID});
make sense?
I am working through the CA angular course. I had a question about this code:
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
In the
So when I click the photo, angular knows what it's index is and the index gets relayed to the PhotoController as a routeParams right and you can access it via $routeParams.id. But what is the #?
The char # (also called hash) is used for navigation inside your app / your website and prevent the browser to refresh the current page.
If you look your url you will see a hash # followed by /photos/{{$index}}
How to deal with Hash in AngularJS ?
In AngularJS, you can use the $location service to manage url
The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.
https://docs.angularjs.org/guide/$location
# are used in something called hash navigation which are a separate section of a URL's elements. hash navigation is used by angular for interior hash routing rather than full page routing.
Not only in angualrjs but in every web project if we use some url followed by # that won't reload the page.
I hope you have noticed using <a href="#"> for dummy urls too.
I'm currently working on a video-conference call application with AngularJS, WebRTC and Socket.IO. I've stumbled upon an issue and am not sure how to fix it.
Basically I have a list of rooms which is looped through by an ngRepeat and then a directive is included. The html looks as following:
My rooms:
<div class="room" ng-repeat="room in userRooms">
<div class="title">{{room.roomId}}</div>
<div class="content">
<conference-call></conference-call>
</div>
</div>
The conference-call directive includes a template with the following html:
<!-- local stream -->
<div class="clients-wrapper" ng-repeat="client in room.clients | filter: getMyId()">
<div class="client-wrapper">
<video ng-src="{{localVideoURL}}" muted autoplay></video>
<div class="display-name">socket-id: {{client}} (local), stream-id: {{localStream.id}}</div>
</div>
<div style="clear:both;"></div>
</div>
<!-- remote stream -->
<div class="clients-wrapper" ng-repeat="client in room.clients | filter: '!'+getMyId()">
<div class="client-wrapper">
<video ng-src="{{peerVideoURL}}" autoplay></video>
<div class="display-name">{{client}} (remote)</div>
</div>
<div style="clear:both;"></div>
</div>
Populating the local video URL goes as follows:
function handleUserMedia(stream) {
scope.localStream = stream;
scope.localVideoURL = $sce.trustAsResourceUrl(URL.createObjectURL(stream));
scope.$apply();
};
and for the remote video URL the following code is executed:
function handleRemoteStreamAdded(event) {
scope.remoteStream = event.stream;
scope.peerVideoURL = $sce.trustAsResourceUrl(URL.createObjectURL(event.stream));
scope.$apply();
};
In a later stage this will be replaced by something like peerVideos.append(stream). But that's not what this is about. Because here's the problem:
pc.onaddstream (the native WebRTC-function which is called when a
client joins) where pc = new RTCPeerConnection(pc_config,
pc_constraints); is never called.
I think this is because of the following:
Whenever someone joins the room the server emits a call which on the client side results in a $scope.$apply() call (the AngularJS way to update and refresh the scope and re-render the page). This makes sure the client sees the remote client in the room he's in. However, because of this $scope.$apply() call the whole conference-room directive is refreshed and re-initialized. This causes the problem where pc.onaddstream is never called because no-one's ever added to the peer connection, because it is re-initialized, or at least I think this is what happens.
Has anyone of you had a similar problem? And how should I approach this issue?
I have a single page with the following html:
<div ng-controller="TraceController">
<div ng-repeat="trace in traces">
<div>{{ trace }}</div>
</div>
</div>
<div ng-controller="DetailedTraceController">
// I want this content to be defined by the clicking of the above.
</div>
I have already populated traces with an array of data. What I would like to do now is to make another $http call based on the clicking of the individual trace elements.
The question is which is the most correct element to use for my trace element? <a> or just a <div>?
Also, what would be the most angular way to then trigger a call to the DetailedTraceController to then call another $http method with the trace details from above?
The way I ended up solving this was with the following:
<div ng-controller="TraceController">
<div ng-repeat="trace in traces">
<div ng-click="clickTrace(trace)">{{ trace }}</div>
</div>
</div>
Which then set up a method call to clickTrace with the trace in question.