Question

我编写了一个简单的指令来设置对元素的关注。然而，这个指令似乎给了我一些错误。

app.directive('getFocus',['$timeout',function($timeout){

  return {
    link: function(scope,element,attrs){
      $timeout(function(){
        element.focus();
      },500);
    }

  };

}]);

Plnkr在这里： http://plnkr.co/edit/0x9GAqcTmerBmZMUiD3Y?p=info

请咨询

Answer 1

传递给链接函数的

元素不是dom元素，它是它的包装。

您需要将该行更改为element[0].focus(); 这应该有用。

Answer 2

如果您不使用jQuery，Angular将使用jQuery的内置子集：jqLite。
jqLite公开了jQuery方法的一个子集（.focus() 不可用）。您可以在 the docs 中找到更多信息。

那就是说，element（传递给指令的链接函数）不是原始DOM元素，而是包装为jQuery / jqLite对象。

因此，如果没有jQuery，您就无法使用element.focus() 但是可以使用DOM元素的原生.focus()方法：element[0].focus()

<强> Updated demo

Answer 3

var app = angular.module("directiveApp", []);
app.controller("DirectiveController", function($scope) {
  $scope.name = "Shantha Moorthy.K";
});
app.directive("myName", function() {
  return {
    restrict: 'A',
    template: '<p>Shantha Moorthy K</p>'
  };
});
app.directive('helloWorld', function() {
  return {
    restrict: 'AE',
    replace: 'true',
    template: '<h5>Hello World!!!</h5>'
  };
});
app.directive('links', function() {
  return {
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Link property examples.',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        elem.css('background-color', 'white');
        scope.$apply(function() {
          scope.color = "white";
        });
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="directiveApp">

<head>
  <title>Directives Examples</title>
</head>

<body ng-controller="DirectiveController">
  <h3>This is an attribute directive.</h3>
  <div my-name></div>
  <h3>This is an element directive to show the Hello World!!!</h3>
  <hello:world></hello:world>
  <h3>This directive example uses the link property inside the directive.</h3>
  <input type="text" ng-model="color" placeholder="Enter a color" />
  <links></links>
</body>

</html>

简单指令抛出错误

3 个答案: