Basically what I am trying to solve is a working example of this Plunker where switching between the tabs I will have the upcoming visits and the completed visits using the same view but different parameter passed to the ng-include.
Explanation of the app in the Plunker (TL;DR)
In my app (AngularJS v1) I am using a module that is managing the tabs with some directives built in it (this is the GitHub reference about it).
Using this plugin, I am trying to include dynamically the same view (using ng-include) in the body of each tab.
<ng-tabs ng-class="">
<ng-tab-head ng-repeat="itemTab in itemTabs" ng-class="{ 'tabHead': true, 'active': itemTab.active }">
{{ itemTab.tabHeader }}
</ng-tab-head>
<ng-tab-body ng-repeat="itemTab in itemTabs" ng-class="{ 'tabBody': true, 'active': itemTab.active }">
<div ng-include="'app/visits/user-visits.html'" onload="userVisits(itemTab.visitState)"></div>
<div ng-include="'app/visits/empty-visits.html'"></div>
</ng-tab-body>
</ng-tabs>
The data passed is something like this (the following array can contain dynamically more than 2 objects, this is why I am performing the ng-repeat in the code above):
$scope.itemTabs = [
{
tabHeader: 'Upcoming Visits',
visitState: 'allocated',
active: true
},
{
tabHeader: 'Completed Visits',
visitState: 'completed',
active: false
}
];
The first view included in the tab body (user-visits.html), is a simple view that is also repeated multiple times and that is showing some details about the visits returned from an API request, while the second one is shown if there are no visits (empty-visits.html) for that specific body, but this is stuff that is already managed by the controller. The URL for the API is something like this:
'apiHost/api/users/visits?include=client,address&visit_state=' + visitState
Basically all the visits (Upcoming and Completed) are coming from the same API request, with only a different parameter visitState passed in the URL. This parameter is the one that I would like to pass to the included view to tell the controller that is managing the request which tab has been shown so which request has to be performed by it.
Now, I have already tried onload attribute as suggested here and here but this is not working, neither what is suggested here is working.
I think this is because the content of the tabs should refresh when there is the tab switching, and for this reason the content is not loaded only once at onload time. Am I wrong about this idea?
What is happening at the moment, is that the tabs plugin is working correctly (because I can see the index changing when I click on the tabs and here there is a working example), but the content is not changing between the tabs, it is only showing the first option (Upcoming Visits).
I have also tried using this specific directive
angular.module('app').directive('includeTemplate', directive);
function directive() {
return {
templateUrl: function (elem, attrs) {
return attrs.includeTemplate;
},
restrict: 'EA',
scope: {
'includeVariables': '&'
},
link: function (scope, elem, attrs) {
var vars = scope.includeVariables();
Object.keys(vars).forEach(function (key) {
scope[key] = vars[key];
});
}
};
}
That was suggested here, but it is also not working I think because it is expecting a clear value passed in and not a dynamic one as a include-variables. So in the tabs body I have used it
<div include-template="'app/visits/user-visits.html'" include-variables="{{ itemTab.visitState }}"></div>
Am I wrong somewhere?
Have you ever faced the problem with these dynamic levels?
As said at the beginning, I have created this simplified Plunker that is showing the whole problem. You can play with it and help me solve this problem.
