Hey there,
I know this problem has been around for 2 or 3 times, but there has never been a solutions, so I thought I might give it a try cause I really need a solution for that.
We are building a service that will enable our customers to manage their apps (change tabs, colours, titles, etc) through a web application. They should be able to configure and select services, which should then appear in their app later on. Just like “Enable FB News (FB Page ID required), enable gallery, enable custom web view (iframe e.g.), etc”.
All these “settings” will be saved in a database which will then be queried through an api by the app at first start. The app should then dynamically generate tabs from the json the api delivered. Just like “News (Facebook), Gallery, Contact, etc…”.
Unfortunately we started to build this with ionic and now ran into the issue, that ion-nav-view cannot be interpolated and needs a hardcoded value. So this for example does not work:
<ion-tab ng-repeat="nav in navigation" icon="{{nav.navIcon}}" title="{{nav.navTitle}}" ui-sref="{{nav.navSref}}">
<ion-nav-view name="nav.navView"></ion-nav-view>
</ion-tab>
There are ideas to overcome this here:
We tried to use this in our project (the solution in https://github.com/driftyco/ionic/pull/1526 with creating a directive), but it seems that this breaks the ion-back button when navigating through the states and also views will only shop up once, which means that when you change the view (click on another tab), and try to go back to the view from before, nothing happens anymore, and you get presented a plain view although the requested url changed correctly.
Do you have any idea on this (how can tabs become dynamic when using ionic)?
HTML:
<ion-tabs class="tabs-icon-top">
<ion-tab ng-repeat="nav in navigation" icon="{{nav.navIcon}}" title="{{nav.navTitle}}" ui-sref="{{nav.navSref}}">
<dynamic-nav-view name="nav.navView"></dynamic-nav-view>
</ion-tab>
</ion-tabs>
<ui-view></ui-view>
Routing/Directive:
.state('navigation', {
url: '/navigation',
abstract: true,
templateUrl: 'templates/navigation/tabbed.html',
controller: 'navigationCtrl'
})
.state('navigation.news', {
url: '/news',
views: {
'news': {
templateUrl: 'templates/api/facebook/feed/feed.html',
// templateUrl: newsTemplateUrl;
controller: 'facebookCtrl'
// controller: newsCtrl
}
}
})
.state('navigation.contact', {
url: '/contact',
views: {
'contact': {
templateUrl: 'templates/contact/contact.html',
controller: 'contactCtrl'
}
}
})
/*app.directive('dynamicNavView', function($compile) {
return {
restrict: 'ECA',
priority: -400,
link: function(scope, $element, $attr, ctrl) {
var dynamicName = scope.$eval($attr.name);
$element.html('<ion-nav-view name="' + dynamicName + '"></ion-nav-view>');
$compile($element.contents())(scope);
}
};
});*/
Controller, Service:
app.controller('navigationCtrl', function($scope, navigationFactory){
// NAVIGATION PARAMETERS WILL BE LOADED HERE
function getNavigation(){
navigationFactory.getNavigationData()
.success(function(data){
$scope.navigation = data;
})
.error(function(){
console.log('navigationCtrl: Error, could not fetch data from API.')
});
};
getNavigation();
});
app.factory('navigationFactory', function($http){
return {
getNavigationData: function(){
return $http.get('http://nicolaswehmeyer.de/apps/api.php?method=getNavigationData&appId='+appId, { cache: true });
}
}
});
If I forgot something, just let me know!
Many thanks in advance!
Many thanks in advance,
Nicolas
? Or maybe someon else solved this?