I am currently working on an AngularJS project with Twitter Bootstrap, and am trying to shift my Bootstrap directives into Angular. I decided on AngularStrap as it provided support for Bootstrap-Select (which I wasn't sure was the same for AngularUI). The tabs example only covered static html though. Is there any way via AngularStrap or AngularJS to load html fragments dynamically, so that it is only called when the tab is clicked? My html fragments need to execute javascript as well.
My reason for doing so is two-fold. First is that each tab contains quite a lot of content, and I do not wish to load all the tabs at once, which will slow down the loading. The second reason is that I prefer a more modular approach to my source code and not put everything on the same html file.
You can use the ng-include directive to load html fragments.
Using the AngularStrap Tab's example you can switch out the static content with the url to retrieve the html fragment. Here is an example based on the AngularStrap Tab example with these key changes:
1) $scope.tabs now has a page property instead of content pointing to either template1.html, template2.html, or template3.html.
$scope.tabs = [
{title:'Home', page: 'template1.html'},
{title:'Profile', page: 'template2.html'},
{title:'About', page: 'template3.html'}
];
2) An ng-include is added to display the currently selected tab's page.
<div ng-include src="tabs[tabs.activeTab].page"></div>
Note: I have the ng-include outside of the ng-repeat so each tab's page contents won't be loaded (even if not displayed).
Related
I am using Packery in a directive as in the example here
Packery angular directive
enter code here
I am also creating dynamic elements as described here angular dynamic templates
in which I wish to apply the directive to however I believe the packery directive is loaded before the dynamic template gallery so the new content is not working with packery , I am looking for a way to ensure the dynamic content works with the packery directive
I'm trying a pretty unusual approach of rendering a UI Bootstrap tab via AngularJS.
What I'm trying to do is:
Custom directive -- (That creates a) --> UI Bootstrap Markup -- (That renders) --> A Tab
I know that two directive shouldn't edit the same DOM node, so I used
- Priority attribute
- Terminal attribute
To allow my directive to be the first ones that are compiled and only then the Bootstrap directive should work on the DOM node.
My initial markup is something like:
<mytabcontainer>
<mytab title="Tab">Content</mytab>
<mytabcontainer>
That will convert to this Bootstrap markup
<tabset>
<tab heading="Tab">Content</tab>
</tabset>
I correctly transform the custom markup to the Bootstrap one, but it doesn't get correctly displayed.
Here is a Fiddle that shows my current progress: Fiddle
Unfortunately this is the only approach I can use because of previous decisions so please don't just tell me to directly use Bootstrap markup
I have created a website using angularJS and a menu with ng-routing. Now I need to open up a modal which has navigation paths to load different content on the same modal. How can I accomplish this thing? can I use ng-view?
you could use a combination of ng-if and ng-include something like
<div ng-if="mode == 'grid'" ng-include="gridUrl">
I have added ng-include to the current view and then through the controller I have changed the necessary views according to the need.
My problem is that when I use ng-cloak in pages that include elements which make use of directives with template code, ng-cloak does not wait for this template code to load and the page is shown incrementally and not as a whole (page elements first and after a while template code pops out).
I have tried to make a custom ng-cloak directive so that it won't remove element's ng-cloak class while any child element contains ng-cloak class but with no success. I thought this one would be a common issue, but I have not managed to find a solution online. Any help appreciated!
I don't think ngCloack was designed to cloak your content until everything is loaded. It is designed to prevent your content to be rendered in its raw form, what with expressions and all.
However, according to the documentation, it might work on the body element, but I haven't verified it myself:
The directive can be applied to the <body> element, but the preferred
usage is to apply multiple ngCloak directives to small portions of the
page to permit progressive rendering of the browser view.
Need to create nested tabs.
In a page there will be multiple Person id tabs as outer tabs and on clicking each tab it will open inner tabs like Home,Office etc., and on clicking inner tab - Home, the tab content will display.
Outertab: Person 1 Person2
Innertab: Home Office
Refering the site - http://angular-ui.github.io/bootstrap/ , created outer tabs with content. created 2 separate tabset but not able to give link between the two tabset.
Can someone help me how to write directive for nested tabs? Any reference links?
I believe that AngularUI Router is what you are looking for. The majority of UI-Router's power is in its ability to nest states & views. Follow the link I've provided and take a look at the section Nested States & Views.
This Plunker example incorporates AngularUI Router to achieve a similar functionality you are looking for.
[EDIT]
This layout composed of nested views is exactly what for the AngularUI Router is used for:
So TabsTemplate will dynamically render the first level of tabs (any number).
TabTemplate could be a template without any dynamic content as Home and Office tabs are always there.
OfficeTemplate and HomeTemplate are again templates that are populated dynamically based on the selection of the current person.
You can refer to how angular bootstrap tabset directive is written.
Reading the tab code helped me understand how directive work. Now I can build many components from the ground up.
I build myself a simpler version of the tabset directive, it doesn't render the content, just the tab-heading element. So I can decide what inside the content via a tab selected callback. And for nested tabs, I just need to put in another tabset directive.