web-dev-qa-db-ja.com

md-tabラベルでng-clickを使用する

_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()関数が呼び出されるようにしたいのですが、呼び出されることはありません。

javascripthtmlangularjsangular-material
10
Ellone

これらの組み込み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

25
Trevor

Creatorが提案したように、ng-clickの代わりにディレクティブを使用することになりました。

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

3
Ellone

角度/材料6を探している間にここに到達しました。この方法でTrevorsソリューションを実行しました。

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

.tsファイル

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