Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ui-view is not rendering the corresponding template for angular-ui-tab?

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>
like image 299
Guest Avatar asked Nov 08 '22 10:11

Guest


1 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 atn also mentioned I have the same thought hope it helps

like image 94
newlearner Avatar answered Nov 14 '22 21:11

newlearner