Используйте ng-click на метке md-tab

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

Попробуйте использовать эти встроенные в 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>

Примечание: Это событие немного отличается от нг-клик, в том, что, если вкладка уже выбрана, а затем щелкнул, событие не срабатывает.

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

Answer 2

Как Создатель предложил, я в конечном итоге, используя директиву вместо ng-click:

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