I have a menu navigation bar that is made of several accordion widgets, and uses ng-include to include every section of the menu separately.
Some of these sections contains sub-sections that are also included through ng-include.
The first level accordion successfully uses the
$rootScope.on('$stateChangeSuccess')
to open the corresponding section based on the url, so that for example if the user opens a page that is supposed to have a certain accordion opened, it will automatically open even if you reload the page or share the link. I used the same code in the inner controller to sync the inner accordion as well, but to no avail. It appears that the second controller is initialized after the event was already fired. Is there a way I can fix this?
Related
I have a problem with a custom directive that I wrote to simulate a tab view in angular.
This directive has only a method to redirect from a state to another.
This directive works fine.
The template of the directive is a div with a uib-tabset and some tabs that contain the views to show them.
This works fine.
Now I need this feature: from a view in a tab, I need to change view with a state.go(view) and I must also go to the tab which contains that view.
I tried different solutions that I found here or in other forums, but probably my requested feature is different from others.
Thank you.
I resolved with the answer in this link.
Sorry for my repost.
Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
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
I am using custom Directive's approach in AngularJS for making dashboard with widgets and for widgets m using angular-gridster
(https://github.com/ManifestWebDesign/angular-gridster).
Requirements:
On right side menu created by custom directive is present.and for routing purpose UI Router in used.
1-I need to open a dashboard firstly empty.
2-when click to Menu1 one widget is opened with data from state menu1 and same for Menu2
3-when 2nd option is clicked another widget added to dashboard without affecting previously opened one and so on.
4-all the widgets have independent data.and navigation in each widget is according to the respective menu.
WorkFlow:
1-empty dashboard is opened via custom directive.
2-widgets are added by providing click event to menu1 and menu2.which will broadcast event.and against that click event a widget is added to widgets array holding information about that widget.
Problem:
problem is routing basically.till now there is no routing involved.info is passed by broadcasting a click event.and by this i have achieved this coloured area.
but the further navigation creates problem.when a state changes by clicking Menu1 or Menu2 it affects both the widgets and and ui-view portion in both widgets show same data.if Menu1 is clicked both widgets show data from Menu1 and vice versa.
Now.i have tried enough solutions but here i want an idea from ui router experts or custom directives' experts.cz i hv tried many possible ways and stuck here for almost a week.
Thanx very very much if anyone can help.
These are the premises I'm trying to implement with ui-router:
The root page has a ui-view; on click it is populated with the main page (main.html).
The main page has two named ui-view's: view1 and view2.
The main page also has four links to populate (1) page11 or page12 in view1, (2) page21 or page22 in view2 (in any combination).
I use abstract states to be able to select which page goes to its respective named view.
I posted my attempt on plunker, any ideas if this is achievable?
UPDATE
I think this plunk explains more clearly what I'm trying to achieve. Click on page11 and then on page21; each will display their template and clear the other. I need both templates to be shown simultaneously.
This is how I solved this problem: I created a directive that compiles markup (using $compile) and used two directives in my html page, each with a different markup.
I have a popup in my application that is hidden when page is loaded and it appears only on click on a specific button.
I have the following code inside my popup DOM
<a ng-click="settings();">welcome</a>
The same code works when i have it in my DOM that is visible when the page loads. But inside the popup, it does not work. It never goes inside the settings() function. Can anyone help me with this?
You should probably create a directive for it. See the documentation and this example. Notice that a scope is applied to the return value of the compilation, effectively var compiled=$compile(element.contents()); compiled($scope);.
Note that there is already a built-in include directive in Angular which might do what you want. The example there responds to changes in a drop down, though you could easily adjust it to respond to a click event.