Question

我正在尝试制作一个自定义指令，因为我提出的第一个解决方案有效，但它似乎很乱。

当tr元素具有mouseenter时，我想显示铅笔图标，当发生mouseleave时，铅笔图标应该再次隐藏。

第一个解决方案:(这有效）

<tr ng-mouseenter="hoverEdit = !hoverEdit" ng-mouseleave="hoverEdit = !hoverEdit" ng-repeat="user in users">
    <td>{{user.first_name}}</td>
    <td>{{user.last_name}}</td>
    <td>{{user.email}}</td>
    <td><i ng-show="hoverEdit" class="fa fa-pencil"></i></td>
    <td><button class="btn btn-danger" ng-click="delete(user)">Delete</button></td>
</tr>

我认为ng-mouseenter和ng-mouseleave似乎混淆了tr元素，所以我想创建一个指令......这是我尝试的内容

指令解决方案（不起作用）

Users.directive('showpencilhover', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.on('mouseenter', function() {
                hoverEdit == !hoverEdit
            });

            element.on('mouseleave', function() {
                hoverEdit == !hoverEdit
            });
        }
    }
});

我认为问题是我不能只引用hoverEdit，所以我不确定如何使这项工作。谢谢你的建议！

Answer 1

当然可以，你只需要用scope作为前言（注意scope函数中注入link的方式）

link: function(scope, element, attrs) {
        element.on('mouseenter', function() {
            scope.hoverEdit == !scope.hoverEdit
        });

        element.on('mouseleave', function() {
            scope.hoverEdit == !scope.hoverEdit
        });
    }

用于mouseenter和mouseleave的AngularJS自定义指令

1 个答案: