[英]Use ng-click on md-tab label
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()
函数,但她从不这样做。
Try using these built in md-tab
attributes 尝试使用这些内置的
md-tab
属性
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
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
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 .ts
file 在
.ts
文件中
tabChanged(event) {
if (event.tab.textLabel == 'matchingTabName') {
//do your stuff
} else {
//do your stuff
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.