javascript - 防止 Angular Material md-tab 中的制表符更改事件

Question

是否可以防止 Angular Material 的 md-tabs 或 md-tab 指令中的制表符更改？单击选项卡后，我使用 md-on-select 指令执行函数，并将特定选项卡的 md-active 值设置为 false。但是标签切换仍然发生，我似乎无法阻止它:

<md-content>
        <md-tabs md-dynamic-height md-border-bottom>
            <md-tab label="Tab1" md-active="ctrl.selectTab1" md-on-select="ctrl.tabClicked('Tab1')">
                <md-content>
                    myContent
                </md-content>
            </md-tab>
            <md-tab label="Tab2" md-active="ctrl.selectTab2" md-on-select="ctrl.tabClicked('Tab2')">
                <md-content>
                    mycontent
                </md-content>
            </md-tab>
        </md-tabs>
</md-content>

在 Controller 函数中我有

function tabClicked(tab) {
        switch (tab) {
            case 'Tab1':
                vm.selectTab1 = true;
                vm.selectTab2 = false;
                break;
            case 'Tab2':
                vm.selectTab1 = false;
                vm.selectTab2 = true;
                break;
        }
}

Answer 1

这是一个例子，但我不确定这是不是你想要的

Exemple

<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <md-content>
      <md-tabs md-dynamic-height md-border-bottom md-selected="selected"    >
          <md-tab label="Tab1" ng-click="tabClicked('Tab1')">
              <md-content>
                  myContent 1
              </md-content>
          </md-tab>
          <md-tab label="Tab2" ng-click="tabClicked('Tab2')">
              <md-content>
                  mycontent 2
              </md-content>
          </md-tab>
      </md-tabs>
   </md-content>
</div>

angular.module("myApp",['ngMaterial']).controller("MyCtrl", function($scope) {

  $scope.selected = 0

  $scope.tabClicked = function(tab) {
    switch (tab) {
        case 'Tab1':
             $scope.selected = 0
            break;
        case 'Tab2':
            $scope.selected = 0
            break;
    }
  }

});

希望对你有帮助