Question

在演讲中深入探讨自定义指令Dave Smith举了一个例子：

.directive('selectAll', function () {
  return {
      restrict: 'A',
      link: function( scope, element ) {
        element.mouseup( function ( event ) {
          event.preventDefault();
        } );
        element.focus( function () {
          element.select();
        } );
      }
  };
})

但结果我有一个错误：

TypeError: undefined is not a function
at link (http://localhost:8080/modules.html:108:21)
at invokeLinkFn (http://localhost:8080/lib/angular.js:8111:9)
at nodeLinkFn (http://localhost:8080/lib/angular.js:7623:11)
at compositeLinkFn (http://localhost:8080/lib/angular.js:6991:13)
at compositeLinkFn (http://localhost:8080/lib/angular.js:6994:13)
at publicLinkFn (http://localhost:8080/lib/angular.js:6870:30)
at http://localhost:8080/lib/angular.js:1489:27
at Scope.$eval (http://localhost:8080/lib/angular.js:14123:28)
at Scope.$apply (http://localhost:8080/lib/angular.js:14221:23)
at bootstrapApply (http://localhost:8080/lib/angular.js:1487:15)

当我将$(element)代替element时，一切都很好：

.directive('selectAll', function () {
  return {
      restrict: 'A',
      link: function( scope, element ) {
        $(element).mouseup( function ( event ) {
          event.preventDefault();
        } );
        $(element).focus( function () {
          $(element).select();
        } );
      }
  };
})

2个问题：为什么？以及如何使第一个行为成为默认行为？

Answer 1

是的，这可能令人困惑。

Angular使用jQLite，它是jQuery的一个子集。 $(element)将是一个jquery对象，因此可以调用jquery函数。例如，调用`document.createElement（＆＃39; div＆＃39;）。css（＆＃34; background＆＃34;，＆＃34; green＆＃34;）将无效，因为它不是jquery-包裹的元素。

希望这有帮助！

Answer 2

如果以正确的顺序包含jquery库，它们应该是等效的。确保在angularjs库之前包含jQuery库。

Answer 3

来自AngularJS文档：

如果jQuery可用，angular.element是jQuery的别名功能。如果jQuery不可用，则angular.element委托给 Angular的内置jQuery子集，称为“jQuery lite”或“jqLite”。

由于jqLite只实现了最常用的功能，如果你想使用“element.select”而不是“$（element）.select”，你需要在DOMContentLoaded事件触发之前加载jQuery库。

现在 angular.element 将是jQuery函数的别名，然后这两段代码将是等效的。

指令中的元素或$（元素）

3 个答案: