Question

我遇到md-tabs时遇到问题：每当我点击要显示的特定标签时，我都无法调用控制器功能。

以下是我尝试的几个代码：

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

和

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

和

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

我希望在点击此标签时调用我的focusSearch()函数，但她从不这样做。

Answer 1

尝试使用这些内置的firstlastVowel属性

md-tab
md-on-select

＆＃13;

md-on-deselect

＆＃13;

var app = angular.module('myapp', ['ngMaterial']);

app.controller('main', function($scope) {

  $scope.myClickEvent1 = function() {
    alert('one selected');
  }

  $scope.myClickEvent2 = function() {
    alert('two selected');
  }

});

＆＃13;

注意：此事件与ng-click略有不同，因为如果已选中并单击选项卡，则不会触发事件。

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

Answer 2

像创作者建议的那样，我最终使用的是指令，而不是ng-click：

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

Answer 3

我在这里寻找角钢/材料6时到达了这里，我是按照Trevors解决方案这样做的：

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

在.ts文件中

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

使用ng-单击md-tab标签

3 个答案: