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>

tabs指令不起作用

1 个答案: