Angular Material - 防止md-tab上的默认设置

Question

我有许多选项卡，代表不同的服务。我希望在用于添加新服务的列表末尾标记最终的“标签”。用简单的'+'表示。这将打开一个简单的对话。

我希望我可以把这个单一的选项卡上我自己的ng单击行为，并防止默认，但这是行不通的。

有没有什么办法可以在标签主体切换发生之前“捕捉”标签点击事件并防止它发生？

Answer 1

您可以将pointer-events设置为none，以防止md-tab响应点击。

例子：

<style> 
md-tabs.readonly { 
    pointer-events: none; 
    user-select: none; 
} 
</style> 

<md-tabs class="readonly"> 
    <md-tab label="can't touch this"></md-tab> 
</md-tabs> 

这是测试与角料工作1.0.1

Answer 2

看来，这是不可能的时刻（见例如https://groups.google.com/forum/#!topic/ngmaterial/rNWMk3S9uDI） - 至少使用官方的API。

如果确定与黑客进入指令内部的解决方案，那么你可以做到以下几点：

angular.module('MyApp').directive('tabWatcher', function() { 
return { 
    require: ['mdTabs'], 
    restrict: 'A', 
    link: function(scope, el, attrs, controllers) { 
     var mdTabsCtrl = controllers[0]; 
     var origSelectFn = mdTabsCtrl.select; 

     // overwrite original function with our own 
     mdTabsCtrl.select = function(index, canSkipClick) { 
      if (...) { 
       origSelectFn(index, canSkipClick); 
      } 
     } 
    } 
}; 

我已经放在一个演示这里http://codepen.io/jarek-jpa/pen/wGxqOq。尝试点击一些标签。 select()电话将被截取，并取决于通过与否的条件。

声明：同样，黑客入MD-突出部指令的内部结构，所以可能会停止工作的任何时间（与角材料1.0.7测试）