Geek Answers Handbook

Ui-view not displaying appropriate template for angular -ui-tab?

ui-view does not work for ui-tab. Please see the script, and kindly tell me where I am going wrong.

On the clients page, I call the client the page updates by clicking on any customer customers.view.html . This page contains a list of customers. When I click on any client, it opens a link, as shown in 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 create the url http://localhost:3000/home/#/updatecustomer/5 , I can open the index.html page, but viewing the corresponding profile and setting does not open ...

See a similar working demo , Running 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>
+5
source share
2 answers
 <a><i ui-sref="home.updatecustomer({ customerId: customer.id })" class="fa fa-edit pull-right" ng-click="$event.stopPropagation()"></i></a>

try this, as in the above, I also think that it helps

+1
source

In ui-sref

must be customer.id without curly braces,
 <a ui-sref="home.updatecustomer({ customerId: customer.id })" class="pull-right"><i class="fa fa-edit"></i></a>

If you can change your state to home.updatecustomer , then the tabs should work.

Update

Fixed Attributes:

  • transferred by ui-sref to a tag
  • passed the pull-right class to tag a
0
source

More articles:


All Articles