I have a index.html page and this page is working as a single directive.
angular.module('app').directive('index', function() {
return {
templateUrl: 'html/index.html'
}
}).controller('index', ['$scope', '$http', function($scope, $http) {}])
Inside index.html, I have three tabs gallery, list and summary. I have put all these three tabs in different directive like this.
/*Gallery directive*/
angular.module('app').directive('gallery', function() {
return {
templateUrl: 'html/gallery.html'
}
})
/*List directive*/
angular.module('app').directive('list', function() {
return {
templateUrl: 'html/list.html'
}
})
angular.module('app').directive('summary', function() {
return {
templateUrl: 'html/summary.html'
}
})
I want that when I load the index.html page the gallery and the summary directive should also get loaded and visible in index.html. Also I am fetching some data in index.html on load, I also want to pass that data to summary,gallery and list directives. Also I have a gallery tab and list tab. When I click on the gallery tab I want the gallery directive to be loaded and when I click on the list tab I want the list directive to be loaded with the data. Initially the gallery and the summary directive should be there by default. The switching will only happen in gallery and the list view. The summary directive should be fixed there.
Initially I developed it all in a single directive. But now I am trying to make all these in a different directive.
Image below explain about my scenario
I am not sure, can we call multiple directive through single directive ? If yes then how can I achieve this ?
Regards
