我在使用 md-tabs
时遇到问题:每当我单击要显示的特定选项卡时,我都无法调用 Controller 函数。
以下是我试过的一些代码:
<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()
函数,但她从来没有。
最佳答案
尝试使用这些内置的 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>
注意:此事件与 ng-click 略有不同,因为如果已经选择并单击了一个选项卡,则不会触发该事件。
来源:https://material.angularjs.org/latest/#/api/material.components.tabs/directive/mdTab
关于javascript - 在 md-tab 标签上使用 ng-click,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31783859/