Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

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.

About

AJAX tabs in AngularJS

Resources

License

Releases

No releases published

Packages

No packages published