CODEWITHSUNDEEP
jqueryangularjstabsangularjs-directive
XMen
XMen

Reputation: 30248

Tabs directive click event breakpoint not firing

Here is my 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>

Here is my tabsMenu directive:

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');
            });
        }
    };
});

The break point in the click event is not hitting.

The normal jQuery code which works:

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

I want to remove the jQuery code and use the directive, but it's not working. Why might this be?

Upvotes: 0

Views: 154

Answers (1)

AlwaysALearner
AlwaysALearner

Reputation: 43947

tabsMenu is not a valid way of specifying a directive in HTML.

AngularJS looks for lower-case dash or underscore delimited and optionally x or data prefixed attribute names during Normalization to determine which elements match which directives.

Try tabs-menu instead of tabsMenu:

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

Upvotes: 1

Related Questions