Question

我正在使用以下指令代码在我的Angular应用程序中制作工具提示：

//Creates a directive that is used to display tooltips throughout the application
app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                // on mouseenter
                $(element).tooltip('show');
            }, function(){
                // on mouseleave
                $(element).tooltip('hide');
            });
        }
    };
});

问题在于我收到了

$未定义

在控制台中。现在，我的看法是这些是来自jQuery的方法。由于我一直试图避免在这个应用程序中使用jQuery（特别是如果它仅用于工具提示），我决定修改代码如下：

//Creates a directive that is used to display tooltips throughout the application
app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            document.getElementById(element).hover(function(){
                // on mouseenter
                document.getElementById(element).tooltip('show');
            }, function(){
                // on mouseleave
                document.getElementById(element).tooltip('hide');
            });
        }
    };
});

在第二种情况下，我收到错误状态

无法读取Null的属性悬停

我如何清除错误并避免使用jQuery。这可能吗？

修改：

我修改了以下代码以清除错误：

//Creates a directive that is used to display tooltips throughout the application
app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.on('mouseenter', function() {
                element.tooltip('show');
            });
            element.on('mouseleave', function() {
                element.tooltip('hide');
            });
        }
    };
});

但是，现在是element.tooltip is not a function。有可能在这里获胜吗？：）

Answer 1

根据Angular Directive documentation，element参数已经是jqLite包装的对象，因此无需在其上调用$()或document.getElementById()。您可以直接在element对象上执行操作。

$在Angular中是未定义的，或者document.getElementById（）是Null

1 个答案: