Angular-AJAX-Tabs
Reuse your AngularJS ngRoute
view controllers and partial templates within a tabbed interface inside another ngView
.
Blog post here: http://blog.richpollock.com/2014/10/angular-js-tabs-directive-with-dynamic-loading-of-partial-templates-and-controllers Plnkr here: http://plnkr.co/edit/3hX2gnrJY7egpXsbNxMd
Angular AJAX Tabs allows HTML such as the following to be used inside an ngView
:
<tabs>
<pane
ng-repeat="pane in panes | filter:{includedInTabView:true}"
tab-title="{{pane.name}}"
controller="{{pane.controller}}"
template="{{pane.template}}">
</pane>
</tabs>
The controller
and template
HTML attributes are required for Angular AJAX Tabs to load in the partial template and bind it to the controller. Otherwise the tabs behaviour falls back to using the inline HTML in the <pane>
tags (which must also specify an ngController as an attribute if a controller needs to be bound to the pane).
The panes
variable in the above Angularised HTML is an array of pane properties as follows:
$scope.panes = [{
"name": "Pane 1",
"template": "pane-1.html",
"controller": "Pane1",
"includedInTabView": true
}, {
"name": "Pane 2",
"template": "pane-2.html",
"controller": "Pane2",
"includedInTabView": true
}, {
"name": "Pane 3",
"template": "pane-3.html",
"controller": "Pane3",
"includedInTabView": false
}]
If some functionality should only appear when the partial template is being used inside a tab, the isTabbedPane
property is set on the controller's scope, allowing HTML to be marked up as follows:
<span ng-show="isTabbedPane">This will only appear when the template is inside a tab!</span>
The controller
specified in the attribute needs to already exist beforehand; Angular AJAX Tabs won't instantiate controllers automatically.