javascript - 如何在 angularjs 中更改 Controller 内的选定选项卡？

Question

在这里我创建了Sample For Tabs 。

我真正需要的是在示例 Controller 中手动设置我需要根据配置参数设置选定的选项卡。在加载时，我需要手动设置要选择的选项卡(基于 tabid 也可以)。我需要 Controller 内的此功能。任何人都可以帮助我吗

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 : '='
},

从 View 传递值

<tabs data-selected="3">

然后在您的指令 addPane funstion 中为

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

如果您将范围变量设置为，则可以从 Controller 配置它

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

公开此变量以查看

 <tabs data-selected="selectedTab">

如果您希望它带有pan id，则在pane指令上使用作用域变量

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

并将您的 addPane 方法更新为

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

还在您的 Pane 上放置一些 ID 作为

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