为什么 $watch 中未定义指令链接函数中的元素参数？答案

【问题标题】：Why element argument in link function of directive is undefined in $watch?为什么 $watch 中未定义指令链接函数中的元素参数？
【发布时间】：2015-07-11 10:17:59
【问题描述】：

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

.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 函数中，我可以获得所有可用的变量（例如 $scope、attrs、ngModel），但不能获得元素..

【问题讨论】：

可能不相关，但您只需要element.trigger('focus')。 element 已经是一个 jQuery 对象。
你试过console.log()element里面的link函数作为console.log(element)吗？
是的，当然，谢谢，我忘了那个元素已经是 jquery 对象了
K.Toress，是的！当我尝试将它记录到控制台时，该变量存在。在我在代码中的 chrome 开发人员工具中设置断点以查看该变量之前，它是未定义的。所以，现在我不明白为什么 chrome 开发人员工具中的该变量仅可用如果我使用它。我的意思是当我在内部 $watch 函数中使用断点执行调试时。魔术。
@champion 我以前也遇到过这个问题，这可能会令人沮丧。看看这个解释stackoverflow.com/questions/28388530/…

标签： angularjs angularjs-directive

【解决方案1】：

使用，

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

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

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

【讨论】：