如何在 angularjs 中更改控制器内的选定选项卡？

Question

我真正需要的是在示例控制器中手动设置我需要根据配置参数设置选定的选项卡。在加载时，我需要手动设置要选择的选项卡（基于 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 : '='
},

传递视图中的值作为

<tabs data-selected="3">

然后在你的指令中将 addPane funstion as

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

如果你在那里使用范围变量，你可以从控制器配置它

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);
 }

同时在你的面板上放一些 id 作为

 <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>

如何在 angularjs 中更改控制器内的选定选项卡？

How to change Selected Tab inside controller in angularjs?

javascript

angularjs

angularjs-directive

angularjs-controller