I have several Angular UI Modals. Every modal has a Cancel button and an "Action" button (which can be Create, Delete, etc).
I use the ui-keyup directive from Angular UI to identify when user pressed buttons.
I would like to click the "Action" button when user hits Enter.
How could I achieve that?
Here is where I got to so far: http://plnkr.co/edit/n6dgiE?p=preview
http://plnkr.co/edit/icKazZ?p=preview
So, I just made sure that createIt() was available on the ui-event (by moving the controller up to <body>) and just triggered it directly.
Now lets say this isn't feasible (there are too many layers between the body tag and the createIt() function). What you COULD do is put some sort of global-handler function or service on $rootScope and then pass the triggering through. However communication down scopes, or across controllers is outside the explicit scope of this question :-)
Related
I have a classic dropdown menu on an Angular project with a main link always shown and a tree of sublinks shown only when hovering this one.
I have two events on the parent:
ng-mouseenter="vm.toggleDropdown($event)"
ng-mouseleave="vm.hideDropdowns($event)"
And they work perfectly fine. The main link has a simple:
ng-click="vm.navToState(item.urlState, $event)"
With a $state.go within to go to the string passed as parameter. On mobile devices, ng-mouseenter is being triggered on tap, showing the dropdown menu and this is perfect. The thing is that ng-click is being triggered too so the menu is only visible a fraction of a second before the next state loads. Is there any way to detect if ng-click is being fired by a touch event so I could add an if statement to navToState() and prevent the $state.go()? I understand that this way that main link would be unreachable in mobile but I'll take care of that adding an extra link within the dropdown.
Any other workaround for the same result is fine too.
Thanks!
Could you set a variable based on whether it is a mobile browser and use that as a check navToStart as to whether you state change or not, then have a separate state change function that doesn't care whether it's mobile or not so you can still change states in the mobile browser? That's one idea, but if it doesn't work, could be worth putting some code in your question for a reference.
Here's an answer on detecting mobile browsers:
https://stackoverflow.com/a/11381730/5349719
Lets assume I am having a directive my-popup which is a popup box. In a view I'm using multiple instances of this same directive. I want to let other popup boxes to know when I've clicked a button or on completion of certain async operations on any of the other instances of the directive and perform the relative operations on them.
In such case what is the best way to get this communication happen?
Create a broadcast for the click event, and put together a function that listens to that event, all these in the directive, and then Voila! problem solved.
I have a very simple code snipper in my page where I have a span. Hovering over this span displays a popover for which I am using angular-ui-bootstrap.
<span uib-popover="This is a popover from Akhilesh"
ng-mouseenter="vm.logToConsole('I am trying hard...')"
popover-trigger="mouseenter">Hover over me to see a popup..!!</span>
Basically I have written a function which makes and API call when the user hovers over this span. The problem here is that let's say I have 10 span tags one below the other and the user quickly moves from 1st span to 10th span (in the process hovering over all 8 spans in between), the API call will get triggered for all the spans. This is what I do not intend to have.
Any idea how can I implement the debounce functionality here?
Use a delay, like one second, after the mouse enters the region, then if the mouse hasn't entered another area, make the API call.
The popover-is-open attribute was added under the 0.13.4 release that can be used to watch the state of your popover like so:
<span uib-popover="This is a popover from Akhilesh"
popover-is-open="vm.isOpen"
popover-trigger="mouseenter">Hover over me to see a popup..!!</span>
Then in your controller:
$scope.$watch('isOpen', function() { });
But if you are just trying to keep the popovers from opening so quickly, consider using the popover-open-delay attribute.
Depending on your use, I found the best method is to simply add ng-mouseover, ng-click etc to the element and define a function to be called.
You can even create a variable and attach it to that objects scope on the fly to keep track of the state (open close).
Kind of hacky, but there is currently no way to define a function that is called on open and on close within ui-bootstrap popover.
I have a use case to toggle the view of a form using a button. The button is not nested in the same structure of the form, and is out side the scope of the forms controller.
What is the best way to have this toggle button comunicate to the contents controller to display this content?
I have had a similar problem and for advanced comunications between controllers i would recomend a service. A service can be injected into multiple controllers so they can share information & state.
However if all your after is something like a button that you can place anywhere that will show the form, you could consider using the $location.path?
eg. on a view with a list of users
www.example.com/users
append edit
www.example.com/users/edit
then have the form controller watch the $location.path and open itself when it see's edit ?
I have a navigation view with one button in the toolbar. Based on the view pushed, the button's label and functionality should chang. I've managed to do this by creating many buttons and activating them as needed (hide/show)
Instead of doing that approach I'd like to have just one button and in the controller change the text and action. Something along these lines:
this.getButton().setHtml("new text");
this.getButton().action = "newaction";
setHtml works, but setting the action doesn't. Examining the button in the console, I see the action changes but when I click it, it responds to the previous action.
Any suggestions on how to approach this?
Thanks
You should use setText instead of setHtml that, err... Doesn't seem to exist! And setHandler to change the handler function.
Alternatively, since you say that you're working in a controller, you can attach a function to the click event of the button and, inside this listener function, decide what action to execute in the current context.