Tabs指令单击未触发的事件断点

Question

这是我的html:

<ul id="tabs" class="nav">
            <li class="active">
                <a href="#tab1" tabsMenu>Overview</a>
            </li>
            <li>
                <a href="#tab2" tabsMenu>Prospect</a>
            </li>
            <li>
                <a href="#tab3" tabsMenu >Account</a>
            </li>
            <li>
                <a href="#tab5" tabsMenu >Script</a>
            </li>
            <li>
                <a href="#tab4" tabsMenu >Notes</a>
            </li>
            <li>
                <a href="#tab5" tabsMenu >History</a>
            </li>
        </ul>

这是我的tabsMenu指令：

angular.module('directives.tabsMenu', [])
.directive('tabsMenu', function() {
    return {
        // Restrict it to be an attribute in this case
        restrict: 'A',
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                console.log('clicked');
                e.preventDefault();
                $(this).tab('show');
            });
        }
    };
});

单击事件中的断点未命中。

正常工作的jQuery代码：

$('#tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
      });

我想删除jQuery代码并使用该指令，但它不起作用。为什么会这样？

Answer 1

tabsMenu不是在HTML中指定指令的有效方法。

AngularJS在规范化过程中查找小写破折号或下划线分隔的属性名称，并可选择以x或数据为前缀的属性名称，以确定哪些元素与哪些指令匹配。

尝试tabs-menu而不是tabsMenu:

<a href="#tab1" tabs-menu>Overview</a>