ui-view is not working for ui-tab. Please see the scenario, and kindly tell me where I am wrong.
In customers page, I am calling page update customer, by clicking on any customer customers.view.html, This page contains the list of customers. When I click on any customer, it open the link like the following url. http://localhost:3000/home/#/updatecustomer/5
customers.view.html
<a><i ui-sref="home.updatecustomer({ customerId: {{customer.id}} })" class="fa fa-edit pull-right" ng-click="$event.stopPropagation()"></i></a>
In config, I am creating the url http://localhost:3000/home/#/updatecustomer/5
, I am able to open the page index.html, but view corresponding profile and setting is not opening...
Please see the similar working demo, Working DEMO
"config"
.state('home.updatecustomer', {
url: 'updatecustomer/:customerId',
views:{
'':{
templateUrl: 'addcustomer/index.html',
controller: 'TabsDemoCtrl',
},
'profile':{
templateUrl: 'addcustomer/profile.html'
},
'setting':{
templateUrl: 'addcustomer/setting.html'
},
}
})
Controller
var app = angular.module('app') ;
app.controller('TabsDemoCtrl', TabsDemoCtrl);
TabsDemoCtrl.$inject = ['$scope', '$state'];
function TabsDemoCtrl($scope, $state){
$scope.tabs = [
{ title:'profile', view:'profile', active:true },
{ title:'setting', view:'setting', active:false }
];
}
index.html
<uib-tabset active="active">
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
<div ui-view="{{tab.view}}"></div>
</uib-tab>
</uib-tabset>
profile.html
<div>profile of customer </div>
Setting.html
<div>Setting for customer </div>
<a><i ui-sref="home.updatecustomer({ customerId: customer.id })" class="fa fa-edit pull-right" ng-click="$event.stopPropagation()"></i></a>
try this as atn also mentioned I have the same thought hope it helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With