Angular Material - 防止 md-tab 上的默认值答案

【问题标题】：Angular Material - prevent default on md-tabAngular Material - 防止 md-tab 上的默认值
【发布时间】：2016-02-20 11:49:13
【问题描述】：

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

我希望我可以将自己的 ng-click 行为放在这个单个选项卡上并防止默认设置，但这不起作用。

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

【问题讨论】：

stackoverflow.com/questions/56607394/…

标签： angular-material

【解决方案1】：

目前看来这是不可能的（参见例如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-tabs 指令内部，因此可能随时停止工作（使用 angular-material 1.0.7 测试）

【讨论】：

【解决方案2】：

您可以将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>

经过测试可与 Angular Material 1.0.1 一起使用

【讨论】：