Как изменить выбранную вкладку внутри контроллера в angularjs?

Question

Здесь я создал Sample For Tabs.

Что мне нужно, так это внутри контроллера образца вручную. Мне нужно установить выбранную вкладку на основе параметра конфигурации. Во время загрузки мне нужно вручную установить вкладку (на основе tabid также отлично). Мне нужна эта функциональность внутри controller.can любой один помочь мне в этом

angular.module('components', []). 
    directive('tabs', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     controller: [ "$scope", function($scope) { 
     var panes = $scope.panes = []; 

     $scope.select = function(pane) { 
      angular.forEach(panes, function(pane) { 
      pane.selected = false; 
      }); 
      pane.selected = true; 
     } 

     this.addPane = function(pane) { 
      if (panes.length == 0) $scope.select(pane); 
      panes.push(pane); 
     } 
     }], 
     template: 
     '<div class="tabbable">' + 
      '<ul class="nav nav-tabs">' + 
      '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 
       '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + 
      '</li>' + 
      '</ul>' + 
      '<div class="tab-content" ng-transclude></div>' + 
     '</div>', 
     replace: true 
    }; 
    }). 
    directive('pane', function() { 
    return { 
     require: '^tabs', 
     restrict: 'E', 
     transclude: true, 
     scope: { title: '@' }, 
     link: function(scope, element, attrs, tabsCtrl) { 
     tabsCtrl.addPane(scope); 
     }, 
     template: 
     '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + 
     '</div>', 
     replace: true 
    }; 
    }) 
    .controller('sample', function($scope){ 
     //Here I need to Change Selected Tab 
    }) 

Answer 1

Try this будет решить вашу проблему

Используйте директиву, как объем

scope: { 
    selected : '=' 
}, 

значение Pass с точки зрения как

<tabs data-selected="3"> 

Тогда в вашей директиве addpane funstion как

this.addPane = function(pane) { 
    if (panes.length == $scope.selected) $scope.select(pane); 
     panes.push(pane); 
} 

Вы можете настроить его от контроллера, если взять переменную области видимости там

controller('sample', function($scope){ 
     $scope.selectedTab = 3; 
} 

Expose эту переменную, чтобы просмотреть, как

<tabs data-selected="selectedTab"> 

Если вы хотите его с панорамированием ид а затем использовать переменная диапазона по директиве панели как

scope: { title: '@', id:'=' }, 

И обновить свой метод addPane в

this.addPane = function(pane) { 
if (pane.id == $scope.selected) $scope.select(pane); 
     panes.push(pane); 
} 

положил Также некоторые идентификатор на ваших стеклах, как

<pane id="1" title="First Tab"> 

Answer 2

plunker Попробуйте это.

Это похоже на то же решение, предоставленное @Partha Sarathi Ghosh.

В моем случае я добавляю часы к selected. Вы также можете изменить selected во время выполнения.

angular.module('components', []). 
directive('tabs', function() { 
return { 
    restrict: 'E', 
    transclude: true, 
    scope: {selected:"="}, 
    controller: [ "$scope", function($scope) { 
    var panes = $scope.panes = []; 

    $scope.select = function(pane,ind) { 
     angular.forEach(panes, function(pane) { 
     pane.selected = false; 
     }); 
     if(ind!=undefined) 
     $scope.selected = ind; 
     pane.selected = true; 
    } 
    $scope.$watch('selected',function(newVal){ 
     var pane = $scope.panes[newVal]; 
     console.log(newVal) 
     if(pane) 
     $scope.select(pane); 
    }) 
    this.addPane = function(pane) { 
     panes.push(pane); 
     if (panes.length == $scope.selected+1) $scope.select(pane); 
    } 
    }], 
    template: 
    '<div class="tabbable">' + 
     '<ul class="nav nav-tabs">' + 
     '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 
      '<a href="" ng-click="select(pane,$index)">{{pane.title}}</a>' + 
     '</li>' + 
     '</ul>' + 
     '<div class="tab-content" ng-transclude></div>' + 
    '</div>', 
    replace: true 
}; 
}). 
directive('pane', function() { 
return { 
    require: '^tabs', 
    restrict: 'E', 
    transclude: true, 
    scope: { title: '@' }, 
    link: function(scope, element, attrs, tabsCtrl) { 
    tabsCtrl.addPane(scope); 
    }, 
    template: 
    '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + 
    '</div>', 
    replace: true 
}; 
}) 
.controller('sample', function($scope){ 
    //Here I need to Change Selected Tab 
    $scope.selected = 2; 
}) 

И HTML

<body ng-app="components" ng-controller="sample"> 
<h3>BootStrap Tab Component</h3> 
<input ng-model="selected"> 
<tabs selected="selected"> 
<pane title="First Tab" selected="true"> 
    <div>This is the content of the first tab.</div> 
</pane> 
<pane title="Second Tab"> 
    <div>This is the content of the second tab.</div> 
</pane> 
<pane title="Third Tab" selected="true"> 
    <div>This is the content of the Third tab.</div> 
</pane> 
<pane title="Fourth Tab"> 
    <div>This is the content of the Fourth tab.</div> 
</pane> 
</tabs> 
</body>