AngularJS directive not firing

Question

Here is the directive:

app.directive('changeImage', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            alert('here');
            $(element).hover(function() {
                // on mouseenter
                $(element).tooltip('show');
                $("#test").addClass('panel');
            }, function() {
                // on mouseleave
                $(element).tooltip('hide');
                $("#test").removeClass('panel');
            });
        }
    };
});

when a user hovers over a table row it should fire, the code for the table row is here:

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="col-xs-2">
                            <span></span>
                        </th>
                        <th class="col-xs-8" ng-click="sort('firstName')">
                            <span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th class="col-xs-2">
                            <span></span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-click="showModal($event, user.emailAddress)" changeImage="{imageId: {{$index}}, colour: blue" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
                        <td>
                            <!--img class="round" src="/images/profile-placeholder.jpg" width="50" height="50">
                                </img> -->
                                <img class="round" src={{user.profileImageUrl}} width="50" height="50"></img>
                        </td>
                        <!-- <td><img src={ {user.profileImageUrl}} width="100" height="100"></img></td> -->
                        <td>
                            <div style="padding-top:1em"><span>{{user.firstName}}</span>
                                <br>{{user.lastName}}
                                <br>{{user.profession}}</div>
                        </td>
                        <td>
                            <div style="padding-top:1em">
                                <img id={{$index}} src="images/arrow-right-pink.png" width="50" height="50"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

My directives normally work fine. So I am not sure why this is not working. I have attached directive to the table row.

Shouldn't your directive be used as change-image and not changeImage inside the HTML tag? — show-me-the-code
– show-me-the-code, Commented Oct 2, 2015 at 18:05

Seth Flowers · Accepted Answer · 2015-10-02 18:11:15Z

1

Change the attribute to change-image on the tr element.

See https://docs.angularjs.org/guide/directive

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

Below that, the docs state that the normalization process is as follows:

Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.

This basically means that if your directive in your js is changeImage, then in the markup, the following would match that directive:

x-change-image
data-change-image
change-image
change_image
change:image

edited Oct 2, 2015 at 18:11

answered Oct 2, 2015 at 18:05

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3754111 Over a year ago

Well spotted! Now it is firing during the table is rendered

Collectives™ on Stack Overflow

AngularJS directive not firing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related