ui-view没有呈现angular-ui-tab的相应模板？

Question

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>

Answer 1

<a><i ui-sref="home.updatecustomer({ customerId: customer.id })" class="fa fa-edit pull-right" ng-click="$event.stopPropagation()"></i></a>

尝试这个atn也提到我有同样的想法希望它有所帮助

Answer 2

There should be customer.id without braces in ui-sref

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

If you will be able to change your state to home.updatecustomer then tabs should work.

Update

Fixed attributes:

• passed ui-sref to a tag
• passed pull-right class to a tag