Iam working on Angular-nvd3 forceDirectedGraph to show data.
I have plot the chart but unable to trigger click event only in forceDirectedGraph.
My issue is when I click on any node i need to open a popup and show data regarding that node.
I did some research in angular-nvd3 site but was unable to find click event which normally will come like below code:
dispatch: {
elementMouseover: (t, u)=>{
},
elementMouseout: (t, u)=>{
},
elementClick: (t, u) =>{
}
}
And I should bind the data in angular 6 scope or I can call a function to bind it.
Please find the below code which I have worked on and suggest me the right way.
Plunkr
It can be done within the nodeExtras function. When you extend it in your Plunkr as shown below, the "stringified" node object is shown in an alert when a mouse click occurs on it. It also changes the cursor (into hand cursor) when the mouse pointer hovers over a node.
nodeExtras: function(node) {
node
.attr('cursor', 'pointer')
.on('click', n => alert(JSON.stringify(n)))
&& node
.append("text")
.attr("dx", 10)
.attr("dy", ".55em")
.text(function(d) { return d.name;})
.style('font-size', '10px');
},
Instead of 'click', you will probably rather opt for 'dblclick', otherwise the alert is displayed each time the user drags a node.
Related
i'm using angularjs WITHOUT jquery, and trying to create scroll event listener.
tried this approach:
$rootScope.$watch(function() {
return $window.scrollY;
}, function(n,o) {
console.log('scroll');
});
but it dosen't work..
I managed to achieve this goal using this technique to create resize listener:
$rootScope.$watch(function() { // Listens to window size change
return $window.innerWidth;
}, function(n, o) {
console.log('resize');
});
is there a proper way to create pure angularjs scroll listener?
creating scroll event listener, 'The Angular Way', is actually very simple, using $window:
$window.onscroll = function() {
console.log('scroll');
};
try using onscroll event of javascript
Yes. your correct AngularJs provide $anchorScroll to scroll across the page but not that much effective. You can either go top or bottom like this. If you want scroll at particular position across vertical or horizontal $anchorScroll doesn't have that option. You have to go for normal javascript even for animation also. If you would like to explore more in Angular Scroll please have a look at this answer. Grate!!
I have an odd situation. I am writing an angular + ionic app with a left slide menu and here is what I am trying to do:
1) Trap the Android back button
2) When you tap the back button, if the menu is not open, take you to the menu (open it)
3) If the menu is open and you hit the back button, exit the app
To trap the back button, I have this code in app.run (also tried relocating to a base controller and injecting it with $controller into other controllers, did not make a difference)
What I am noticing is that if I actually tap the 'menu icon' of the menu, the "isOpen" reliably prints true/false alternately as a I open and close the menu
But, when I tap the Android back button, it works the first time (prints true or false), but every subsequent tap does not change the isOpen state, while the menu actually toggles.
This therefore makes it impossible for me to programmatically detect if the menu is open or close within the android back button handler.
It's confusing me why this is only a problem within the android back handler, and not a problem when I tap the menu item. It's the same code that is called in both cases, which is
$ionicSideMenuDelegate.toggleLeft();
My Android handler code:
$ionicPlatform.registerBackButtonAction(function (event) {
$ionicSideMenuDelegate.toggleLeft();
$ionicSideMenuDelegate.$getByHandle('sideMenu').toggleLeft();
$timeout ( function() {
console.log ("Status of SIDE MENU IS : " + $ionicSideMenuDelegate.$getByHandle('sideMenu').isOpen());
},1000);
}, 100);
I've also set up a codepen, though not sure how one can test it on and android device, because every time I try and hit the backbutton on a codepen or jsfiddle, it makes the browser go back a page.
Any insight into what is going on? I've asked in the ionic forum, but haven't been able to find out why (yet) --> hence the post to the SO community in the hopes it reaches a wider audience.
registerBackButtonAction needs a priority to override the other actions:
The priorities for the existing back button hooks are as follows:
Return to previous view = 100 Close side menu = 150 Dismiss modal =
200 Close action sheet = 300 Dismiss popup = 400 Dismiss loading
overlay = 500
Your back button action will override each of the above actions whose
priority is less than the priority you provide. For example, an action
assigned a priority of 101 will override the 'return to previous view'
action, but not any of the other actions.
I've tested this code and it works as expected:
.run(function($ionicPlatform, $ionicSideMenuDelegate, $ionicPopup) {
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
if (!$ionicSideMenuDelegate.isOpenLeft()) {
$ionicSideMenuDelegate.toggleLeft();
} else {
navigator.app.exitApp();
}
}, 1000);
});
As you can see I've used priority 1000 to make sure that I override all the default actions.
I've also used preventDefault(). I don't think you need this but, just in case.
This bit of code only works for the left-side menu as I only check:
$ionicSideMenuDelegate.isOpenLeft()
and only open the left one:
$ionicSideMenuDelegate.toggleLeft()
but you can change it to work with the right menu as well.
UPDATE:
If someone is interested to find out more about Android and Back Button this is the best article I've read so far.
How to Get the mouse position, in "onRegionOver:function(event,code,region)" in jqvmap???
The event object in the function, doesn't have the properties from mouse position.
I need show a div, with extra country information, when the mouse overs the region.
thank you very much!
First of all I am not sure if this is a right approach or not. If you open the jquery.vmap.js plugin file, check out this code:
if (e.type == 'mouseover') {
jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathes[code].name]);
Change the code of the following line to:
jQuery(params.container).trigger(regionMouseOverEvent, [e, code, mapData.pathes[code].name]);
This event e is passed as a parameter to the function in the plugin. And in your call back function add one more parameter
onRegionOver:function(event,e,code,region){
alert(e.pageX,"_",e.pageY);
}
This worked for me...Hope this Helps for you
I have a window, and inside it a panel. The panel contains text (basic html). After the window is ready I call the following function, which finds elements with specific class, and registers click events on them. This works at first.
After closing the window, and recreating 1:1 similar window the events will not fire. The same happens if I .update() the panel and re-run my function - the events fail to fire. Why is this?
I can still see elements being found, and apparently some events must be registered, but my clicks can't be captured by the debug code, or the receiving function anymore.
addEvents: function(win) {
// The Window
var ow = win;
// Using this debug trick I can see that on the second time the events wont fire
// -- nothing gets printed to console
Ext.util.Observable.capture(ow, function(){
console.log(arguments);
});
// Will search for elements, finds elements that have class myclass
// In my case the elements are just ordinary html tags in the visible content
// area of the panel.
var elems = ow.down('panel').getEl().select(".myclass").elements;
Ext.Array.forEach(elems, function (item, index, allItems) {
// We need Ext DOM element to be able to attach stuff to it
var elem = new Ext.dom.Element(item);
elem.on ('click', function (evt, el, o) {
ow.fireEvent('myevent', ow, elem);
});
});
}
I suspected at first that I have to actually unregister the previous events and destroy the window, so I tried adding this to the close of the window:
window.down('panel').destroy();
window.destroy();
However it seems I have some other problem I really am unable to understand.
This is a very JQuery-ish way to add events. You are dealing with components and should add event listeners on components. If you need to delegate events down to html elements then you need to set a single event listener on the Component encapsulating the elements and add delegate config to the actual html elements.
Here are some resources:
Explain ExtJS 4 event handling
Event delegation explained:
http://www.sencha.com/blog/event-delegation-in-sencha-touch (applies to extjs just as well)
More on Listeners with extjs: https://stackoverflow.com/a/8733338/834424
I am trying to make a modal for login/register forms and wanted to make something that is reusable, I came across this blog post that goes through making a directive. I used that as well as angular-ui-bootstrap docs to make my modal. It does work, but the first time I click the button to pop the modal, it doesn't work. I can see the scope getting created using Batarang, but nothing pops. Subsequent clicks do work, and if I have 2 buttons, no matter which one I press first, it doesn't work, and after that either one works.
I made up a plnkr to show this. I am using templates etc so I added those. You can see that pressing "Register" or "Login" will not pop up the modal, but if you click again, the modals pop. You can also see the scope getting created on the first press with Batarang.
Thanks in advance for the help!
Edit:
I found some more information that might be helpful. The first time I click the link, the scope.closeFormModal gets called.
Try add:
scope.$watch(
function () {
return scope.formModal;
},
function (newData, oldData) {
if (newData === oldData) {
return;
}
if (newData) {
$compile($element.contents())(scope);
}
});
to link function that was returned from $compile function.