Javascript 在 md-tab 标签上使用 ng-click

Use ng-click on md-tab label

提问by Ellone

I'm having trouble with md-tabs: I can't call a controller function whenever I click on a specific tab to be displayed.

我遇到了问题md-tabs：每当我单击要显示的特定选项卡时，我都无法调用控制器函数。

Here are the few codes I tried :

这是我尝试过的几个代码：

<md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true" ng-click="focusSearch()">

            <md-tab label="<i class='fa fa-search'></i>" ng-if="handleResize()">
                <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}">

and

和

<md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true">

            <md-tab label="<i class='fa fa-search' ng-click='focusSearch()'></i>" ng-if="handleResize()">
                <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}">

and

和

<md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true">

            <md-tab ng-click="focusSearch()" label="<i class='fa fa-search'></i>" ng-if="handleResize()">
                <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}">

I want my focusSearch()function to be called when I click on this tab but she never is.

我希望我的focusSearch()函数在我点击这个标签时被调用，但她从来没有。

回答by Trevor

Try using these built in md-tabattributes

尝试使用这些内置md-tab属性

• md-on-select
• md-on-deselect

• md-on-select
• md-on-deselect

var app = angular.module('myapp', ['ngMaterial']);

app.controller('main', function($scope) {

  $scope.myClickEvent1 = function() {
    alert('one selected');
  }

  $scope.myClickEvent2 = function() {
    alert('two selected');
  }

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>

<div ng-app="myapp" ng-controller="main">
  <md-tabs>
    <md-tab md-on-select="myClickEvent1()">One</md-tab>
    <md-tab md-on-select="myClickEvent2()">Two</md-tab>
  </md-tabs>
</div>

Note:This event differs slightly from ng-click, in that if a tab is already selected and then clicked, the event will not fire.

注意：此事件与 ng-click 略有不同，因为如果已经选择了一个选项卡然后单击，则不会触发该事件。

Source: https://material.angularjs.org/latest/#/api/material.components.tabs/directive/mdTab

来源：https: //material.angularjs.org/latest/#/api/material.components.tabs/directive/mdTab

回答by Ellone

Like Creator suggested, I ended up using a directive instead of ng-click:

就像 Creator 建议的那样，我最终使用了一个指令而不是ng-click：

http://codepen.io/anon/pen/oXJPvx

http://codepen.io/anon/pen/oXJPvx

回答by abstractME

I reached here while looking for angular/material 6, i did in this way by following Trevors solution:

我在寻找角度/材料 6 时到达这里，我通过遵循 Trevors 解决方案以这种方式做到了：

<mat-tab-group (selectedTabChange)="tabChanged($event)">

in .tsfile

在.ts文件中

   tabChanged(event) {
    if (event.tab.textLabel == 'matchingTabName') {
        //do your stuff
    } else {
        //do your stuff
    }
  }