Jquery AngularJS.focus（）在链接函数中不起作用
为什么如果我有以下指令，它会起作用：Jquery AngularJS.focus（）在链接函数中不起作用,jquery,angularjs,angularjs-directive,Jquery,Angularjs,Angularjs Directive,为什么如果我有以下指令，它会起作用： angular.module('app', []) .directive('selectOnFocus', function(){ return{ restrict: 'A', link: function(scope, element){ element[0].focus(); } }; }); 但如果
angular.module('app', [])
.directive('selectOnFocus', function(){
return{
restrict: 'A',
link: function(scope, element){
element[0].focus();
}
};
});
angular.module('app', [])
.directive('selectOnFocus', function(){
return{
restrict: 'A',
link: function(scope, element){
element.focus();
}
};
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app">
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here" select-on-focus >
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
我想问题是，为什么您的代码使用元素[0].focus，而不是元素[0].focus。如@mcranston18的注释所示，答案是元素返回一个jqLite对象。请参阅文档中的指令，以及jqLite元素，以更深入地了解这意味着什么。此外，更新后的JSFIDLE中元素对象的简单控制台日志显示了jqLite对象内部的内容 简而言之，当您包括jQuery和call element.focus时，您使用的是jQuery focus方法。当您使用元素[0].focus时，您正在访问DOM元素本身并使用纯JavaScript。我建议不要对Angular使用jQuery，而要习惯使用jqLite。您会发现您可能不需要jQuery和Angular
希望这有帮助 我认为问题是，为什么您的代码使用元素[0].focus，而不是元素[0].focus。如@mcranston18的注释所示，答案是元素返回一个jqLite对象。请参阅文档中的指令，以及jqLite元素，以更深入地了解这意味着什么。此外，更新后的JSFIDLE中元素对象的简单控制台日志显示了jqLite对象内部的内容 简而言之，当您包括jQuery和call element.focus时，您使用的是jQuery focus方法。当您使用元素[0].focus时，您正在访问DOM元素本身并使用纯JavaScript。我建议不要对Angular使用jQuery，而要习惯使用jqLite。您会发现您可能不需要jQuery和Angular
希望这有帮助 查看此答案：查看此答案：要访问direct DOM元素，其始终仅为元素[0]？在什么情况下，元素数组中会有多个项？根据文档，元素是该指令匹配的jqLite包装元素。因此，在您的情况下，链接函数中始终会有一个jqLite包装的元素。我尝试使用元素[0]。但在运行测试时，我得到的结果类似于focus不是函数。但是如果我使用元素[0]，它的效果就像一个符咒。选择。您知道我为什么会出现此错误吗？所以要访问direct DOM元素，它总是只包含元素[0]？在什么情况下，元素数组中会有多个项？根据文档，元素是该指令匹配的jqLite包装元素。因此，在您的情况下，链接函数中始终会有一个jqLite包装的元素。我尝试使用元素[0]。但在运行测试时，我得到的结果类似于focus不是函数。但是如果我使用元素[0]，它的效果就像一个符咒。选择。你知道我为什么会犯这个错误吗？