Question

我创建了一个简单的指令，它在输入上触发焦点事件以显示工具提示

.directive('tooltipValidationObserver', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function($scope, element, attrs, ngModel) {
            $scope.$watch(function() { return ngModel.$invalid; }, function(newVal, oldVal) {
                $timeout(function() {
                    $('#' + attrs.id).trigger('focus');
                });
            });
        }
    }
}])

如果我使用attrs.id，它会完美运行，但如果我想执行

$(element).trigger('focus')

元素未定义，在链接函数中，它在链接阶段定义..并且在watch函数中未定义。为什么？在watch函数中，我可以获取所有可用的变量（例如$ scope，attrs，ngModel），但不能获取元素..

Answer 1

使用，

$(element[0]).trigger('focus');

链接函数element中的

是jqLite-wrapped element，尝试console.log(element)并展开输出，您可以看到0索引是实际的dom元素。这是一个DOC

通过element[0]获取实际的dom元素，并为该元素创建jquery引用$(element[0])，并在其上触发焦点事件。希望这有帮助。

为什么在$ watch中未定义指令的link函数中的元素参数？

1 个答案: