Question

为什么如果我有以下指令呢？

angular.module('app', [])
    .directive('selectOnFocus', function(){
        return{
            restrict: 'A',
            link: function(scope, element){
                element[0].focus(); 
            }
        };
    });

但如果我将其切换为此，则表示element.focus（）不是函数。为了使这段代码有效，我需要在index.html中导入jquery。

angular.module('app', [])
    .directive('selectOnFocus', function(){
        return{
            restrict: 'A',
            link: function(scope, element){
                element.focus(); 
            }
        };
    });

这是我的HTML：

<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>

Answer 1

我认为问题是，为什么你的代码使用element [0] .focus（），但不能使用element.focus（）。正如@ mcranston18评论所指出的那样，答案是元素返回一个jqLite对象。请参阅指令文档here和jqLite元素here，以便更深入地了解这意味着什么。此外，在更新的jsFiddle http://jsfiddle.net/rmra3cso/1/中，元素对象的简单控制台日志显示了jqLite对象中的内容。

简而言之，当您包含jQuery并调用element.focus()时，您正在使用jQuery焦点方法。当您使用element[0].focus()时，您正在访问DOM元素本身并使用纯JavaScript。我建议不要在Angular中使用jQuery，并习惯使用jqLite。你会发现你可能不需要使用Angular的jQuery。

希望这会有所帮助。

Answer 2

这是因为focus() 不支持jqLite和element上的角度文档

如果jQuery不可用，angular.element会委托给Angular jQuery的内置子集，称为“jQuery lite”或“jqLite。”

AngularJS .focus（）在链接函数中不起作用

2 个答案: