I recently developed a nested directive for a multitabbed form, and here is a simplified version:
<outer>
<inner heading="a" src="'a.html'" active="true"></inner>
<inner heading="b" src="'b.html'"></inner>
</outer>
This directive creates a tabset with ul/li elements. When a tab is clicked, the corresponding div becomes visible because its respective li is set to be active.
Below are my directives:
(function(){
'use strict'
angular
.module("testDirective", [])
.directive("outer", outer)
.directive("inner", inner);
function outer(){
return {
templateUrl: 'outer.html',
transclude: true,
controller: function($scope){
var tabs = $scope.tabs = [];
this.addTab = function(_active, _name) {
tabs.push({
active : _active,
name : _name
});
}
$scope.toggle = function(ix){
for (var i = 0; i <= tabs.length - 1; i++) {
tabs[i].active = false;
}
tabs[ix].active = true;
}
}
}
}
function inner(){
return {
require: '^outer',
scope: {
src : '=',
active : '=',
},
templateUrl: 'inner.html',
link : function(s, e, a, ctrl) {
ctrl.addTab(a.active, a.heading);
}
}
}
})();
While I have successfully implemented most of the functionality, there is one aspect that is causing me some trouble: how can I efficiently show/hide content? You can see the full code on this Plunker.