I have a weird situation. I created 2 directives in my application.
orgNavigation
menuEnhancer
orgNavigation is responsible to build the html structure and menuEnhancer is to apply DOM specific logic. Both working great with static data but when the dynamic data is introduced, menuEnhancer is not working.
To test the behavior of menuEnhancer, click on any menu item. It should bring popup, which is working fine in static loaded template. But for dynamic loaded template, popup is not working.
I am thinking it might be because menuEnhancer link is executing before the navigation items loaded. Can anyone help how to fix it?
Plnkr
Related
Onsen UI: v2.0.1
AngularJS: 1.5.9
I am building an Android and IOS application that requires dynamic tabs (ons-tab) like in native applications. The content in each tabs can be up to a hundred items. So I want to use ons-lazy-repeat for the ons-tab content to minimize memory consumptions. How do I go about achieving this (dynamic tabs and ons-lazy-repeat ) with Onsen UI. I have searched online and I couldn’t see any solution.
Thank you!
The ons-lazy-repeat component is described in detail in the documentation.
Dynamic tabs can easily be achieved by using the ng-repeat clause of AngularJS. If you don't want to load the content of each tab right at the beginning, you have multiple options like ng-if or ng-include to make sure that only the content of the current visible tab is loaded. You may access and check the visibility of the $index variable that is available in the ng-repeats scope to do so.
See this post how this may be done. Onsen offers a tabbar and tab components which will work the same way as the tab div's in the questions answer.
I have a crud application, The situation I want is when you click in the list, the edit form will be opened up in a modal dialog or toggling from the side.
the form is a template (/templates/form.html).
If I use ng-view, everything is simple, I set the templateUrl in the router and I get the form recompiled in the view.
But since I want to still see the grid, I want to open the form above it. so ng-view is not going to work.
how can I do the following from the controller:
load the template form maybe via ngInclude remember Im in the JS controller.
Bind the model
append the form with the binded model to the html
Thanks
Have you tried https://docs.angularjs.org/api/ng/directive/ngInclude ?
Hope it suits your case =)
I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!
I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.
We are building an application with complicated UI.
This is the sample view of a page in the application:
Left menu will contain the list of links for the corresponding pages in the right side.
We are using ng-router for building the application.
We took the whole page as one ng-view and include the left menu as single html template.
When clicking on the links, we will replace the right side tab content by ng-include.
Inside each right side content, we have sub tabs. When clicking on sub tab, we will replace the content of sub tab.
In Left menu template controller we have few ajax calls. When loading the content of the sub tab in right side, templates are not reloaded by the angular and is cached by the angular. But the ajax calls are reloaded again.
It should not reload the ajax calls inside the left menu when changing the content of sub tab in the right content.
Somebody might have faced this issue. Please suggest me to proceed further.
You definitely should check the ui-router project from the angular-ui team.
You will find their routing and the possibility to have nested views, named views and parameters super helpful with a complex design like yours.
https://github.com/angular-ui/ui-router
Alternatives to ui-router:
http://dotjem.github.io/angular-routing/
http://angular-route-segment.com/
Without diving into pros and cons.