Javascript AngularJS指令不点火

以下是指令：

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

当用户将鼠标悬停在应触发的表行上时，表行的代码如下：

        <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>

{{user.firstName}

{{user.lastName}

{{user.profession}

---

我的指令通常运作良好。所以我不知道为什么这不起作用。我已将指令附加到表行。

将

tr

元素上的属性更改为

Change image

看

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的规范化名称（例如ngModel）引用指令。但是，由于HTML不区分大小写，我们在DOM中以小写形式引用指令，通常在DOM元素（例如ng模型）上使用破折号分隔的属性

在下面，文档说明规范化过程如下：

• 从元素/属性的前面剥离x和数据
• 将以：、-或_分隔的名称转换为camelCase

这基本上意味着，如果js中的指令是

changeImage

，那么在标记中，以下内容将与该指令匹配：

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

• x-变换图像
• 数据更改图像
• 改变形象
• 改变你的形象
• 更改：图像

---

您的指令不应该被用作HTML标记中的

change image

而不是

change image

吗？很好！现在，它在渲染表的过程中激发