I'm trying to use angular.js with X3DOM. I want to be able to create a shape (in this case a sphere), and have it do something when the user clicks on it. I've been able to get it to work using the traditional onclick method. However, when I switch to angular's ng-click, to event fails to fire. Unfortunately, since the data that I want to display is stored within the controller, using the angular onclick is kind of a must.
I've done a bit of research and supposedly angular.js isn't 100% compatible with X3DOM, so I'm guessing this is part of the issue. But I've been using other angular directives without an issue. Does anyone know if there's a way around this error?
Code Sample:
<transform translation="{{datum['Market Loading']}} {{datum['Growth Loading']}} {{datum['Size Loading']}}" ng-repeat="datum in energy.data" ng-hide="energy.hide === true" onclick="">
<shape>
<appearance>
<material class="energy" diffuseColor="{{energy.color.join(' ')}}" transparency="{{energy.hide}}"></material>
</appearance>
<sphere radius="{{datum['Specific Risk']}} ng-click="DO SOMETHING"></sphere>
</shape>
</transform>
I guess you need to use the standard onclick event, as X3DOM needs to translate click events on the canvas to the actual node inside the tag and x3dom does not know abaout ng-click.
In your standard onclick handler you can retrieve the angular scope aganain an fire your angular click handler from there.
Something like this (untestet):
<sphere radius="{{datum['Specific Risk']}} onclick="myclick(event)"></sphere>
and a standard onclick event handler:
function myclick(event) {
// TODO: add more error handling
var scope = angular.element(event.target).scope();
scope.yourAngularClickHandler(event);
}
This is a bit ugly and getting the scope from the dom element on every click may also be slow. I'm doing something similar with an onmousemove event and the speed is okay. Don't forget to add some error handling for the cases where the scope is not ready or cannot be found etc.
Related
I'm using Fullcalendar v5 in angular js, and i'm trying to make a custom event with:
https://fullcalendar.io/docs/content-injection
eventContent: function(arg) {
return { html: constructEvent(arg) }
},
The thing is that if i add:
"<div ng-repeat='user in arg.event._def.extendedProps.users' class='avatar'>"
"<p>{{ user.name }}</p>"
"</div>"
it won't render. It's like it's outside angular's scope. Can someone tell me if there is a way to construct this with angular js logic? Or i need to use vanilla js to iterate through items. Also ng-click doens't work. I tried even with triggering safeApply digest but no results.
I just want to edit the event inside calendar with the framework i'm using, and use angular events inside it to open sidebars or to make api calls.
Rendering Events
with your line <div ng-repeat it seems that you'd like to iterate through an array of events to display on your screen. If this is the case, you simply need to render the events via the 'events' parameter.
https://fullcalendar.io/docs/event-object
Regarding eventContent (the contents of an event, such as title, subtitle, img, etc)
It looks like at the minute only React JSX Nodes are supported. Vanilla JS is your only way forward.
https://fullcalendar.io/docs/content-injection
I am trying to add new HTML code via AJAX to an Angular 5 app and add click event to the elements. But the click event doesn't work as expected, I can't use the 2 way data-binding way because I am using the jQuery data-tables plugins and he add the HTML to the Dom and not the angular template.
I have tried:
<button (click)='myClassFunction()'>Click!</button> this line does nothing
<button onclick='myClassFunction()'>Click!</button> this line said myClassFunction is undefined
<button onclick='this.myClassFunction()'>Click!</button> this line said myClassFunction is undefined
How can I bind this click event to my function?
Angular is written in Typescript.
When you serve or build your application, this typescript application is then compiled, minified and uglified to native Javascript.
This means that your
(click)="myClassFunction()"
Will become something along the lines of
onclick="srgu.gferu()"
And as you can see, Angular won't recognize that.
It doesn't matter if you use JQuery or plugins : that is the way Angular works.
To do that, you will need to create window functions, or global functions.
myClassFunction() {
// Create your window function, make it tslint compliant
window['myWindowClassFunction'] = () => {
// Your function's logic here
};
}
Now, in your appended HTML, you need to write
<button onclick='window.myWindowClassFunction()'>Click!</button>
I've recently switched from jQuery to Angularjs and I am in the process of re-coding some pagination logic for the links ("Next", "Previous", etc.) that were written in jQuery-style Javascript previously.
Each link has an ngIf condition (for example, the "Previous" link won't show if you're on page 1) plus an ngClick event, which essentially updates a scope variable called $scope.pagination.position that determines which results are displayed in the table.
My original code was something like this (simplified for clarity):
Template
<a ng-if="pagination.position > 0" ng-click="pagination.first()">First</a>
Controller
$scope.pagination = {
first: function() {
this.position = 0;
}
}
Then I learned more about directives, and how most DOM elements that aren't static HTML should be created using a directive. So I switched each link (since each has it's own display rules and behaviour on clicks) to its own directive, like so:
Template
<a pagination-first></a>
Directive
app.directive('paginationFirst', function() {
return {
link: function(scope,el,attr) {
scope.pagination.first = function() {
scope.pagination.position = 0;
}
},
replace: true,
template: '<a pagination-first ng-if="pagination.position > 0" ng-click="pagination.first()">First</a>'
}
});
I'll cut straight to the chase : am I doing directives wrong? All that's happened, from my perspective, is I've flipped from having logic in my template to having a template in my logic, and I've defined the click event function in the directive rather than in the controller.
Is this even an appropriate time to be using a directive?
I'd like to learn best practices, so I'd love to know if I've missed the point and if the original templated-based ngIf and controller function approach was fine, even with longer and more complex ngIf conditions than the one shown.
If I want to add specific behaviors to a dom or dom list then I normally create a directive. As per angular js perspective the dom manipulation should only be done through directive (For me it is the best place, sometime I have to disobey this due to my lack of knowledge ). I specially found directive use full while creating a widget. In one of my project there was a part where a section is dedicated to display an image and also upload the image. I just use the directive on the top div, with the help of link function I attached the event handlers to various child dom. And as my project doesnot require an isolated scope (as this widget was all used in a single project and the outer scope was under my control) . So it worked like a charm. I cerarted the directive once. And used that widget through rest of the project as it's behavior and design (of the widget ) was same through out the project. For the pagination widget you can create a directive. Take the directive attibutes value as the input of the pagination parameters. Like calling script, limit offset. Container identifier to update the content. Then you can solely concentrate on the pagianation behavior. But from my experience (as I am also not so experienced in angular js), sometimes it becomes a little hectic to develop a directive and and use that throughout the project. As in some places we need to modify the behavior of the directive. And for this it may breaks elsewhere. But I know as I learn more I will be more efficient to handle this kind of situation. Hope my experience will help you.
I'm trying to automate clicking a few links on a webpage
For example, in Google Chrome if I type Javascript:setDisplayType('source'); then it runs the function in the html defined as
<input type="radio" name="DisplayType" value="source"
onclick="setDisplayType('source');">
So far so good. However, I'm unsure about how to do the same with the following
<td id="4124321351_U923" class="o bgc b" onclick="s(this,'329803656','40745906','9/2');b(this,'5.5','5.5');">5.5</td>
I've tried the following without success
Javascript:s(this,'329803656','40745906','9/2');
Javascript:b(this,'5.5','5.5');
Javascript:s(this,'329803656','40745906','9/2');b(this,'5.5','5.5');
Please can someone explain why it's not working and how to fire this onclick event using a similar method?
if you're not using JQuery or similar, then something like:
document.getElementById("4124321351_U923").click();
might work. In short, your examples above don't work because the 'this' magic variable needs to be initialised to point to the link being clicked. You could either try to initiate a click event on the element (as per my example) or you could manually grab a reference to the link, and pass that in instead of this
Problem is with this argument because it's not called from the element and you called it outside.
Javascript:s(this,'329803656','40745906','9/2');
Try proving a proper argument like this,
Javascript:s(document.getElementById('4124321351_U923'),'329803656','40745906','9/2');
i have a link_to_function that shows a hidden div. now i would like to hide this div if the user clicks out of this div(onBlur or onclick). when should i call this function and how? this is my function that shows the hidden div:
<%= link_to_function "ShowHorse", "$('horsePic').show();" :class =>"links_02"%>
shoud it be from inside this function? or should i call an external action with link to remote to look after events on the site? i would be able to use function onblur if it references a form element(text_field or sth). but i dont know how or when to put code for just div element. i was trying sth like:
:onclick=>"if($('loginContainer').onClick) {} else {$('loginContainer').hide}"
i dont know much javascript so i am kind of a lost here. was checking google but wasnt able to find anything useful. any help would be greatly appreciated!
It appears that you're using Prototype, so you can use the built-in JavaScript helpers in Rails to do this for you.
One thing to be careful with in JavaScript versus Ruby is that functions are not called unless the brackets are included. Without the brackets you get a reference to the function instead.
// Check to see if a function is defined
if ($('something').onClick)
true;
// Check to see if a defined function returns a true value by calling it
if ($('something').onClick())
true;
Typically you can just introduce functions in your link_to definition as required.
You should look at defining a click event on the whole body of the page. If a click isn't caught on the div you're watching, close the div. You might need to look at capturing and bubbling javascript events, to get the right click target.
http://www.quirksmode.org/js/events_order.html Very good resource for understanding how a click will move through your page.