为什么 angular.element('<p>').css('color', 'red');工作？

Question

为什么 angular.element('<p>').css('color', 'red'); 不起作用？

angular
  .module('app', [])
  .controller('MainController', MainController)
;

function MainController() {
  // angular.element('p').css('color', 'red'); ERROR. Now I see what the docs meant by "HTML String"
  // angular.element('<p>').css('color', 'red'); No error, but doesn't work
  angular.element(document.querySelector('p')).css('color', 'red'); // Works
}

<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='MainController as vm'>
    <p>test</p>
  </body>

</html>

Answer 1

根据 docs，angular.element 接受 "HTML string or DOMElement to be wrapped into jQuery."

第二个示例不会出错，因为您实际上传递的是 HTML 字符串。这将导致 angular.element 到 return 新创建的 jQuery 对象，而不是作用于现有对象。

您可以通过将新元素分配给变量来说明这一点：

var newElement = angular.element('<p>');

这等同于完整的行为 jQuery:

var newElement = $('<p>');

最后一个示例使用 querySelector，其中 return 是实际的 HTML DOM 元素。这就是 Angular 需要对现有元素进行操作的内容（除非您已经包含 jQuery - 然后您可以像在 jQuery/example 1 中那样使用选择器）。

为什么 angular.element('<p>').css('color', 'red');工作？

Why doesn't angular.element('<p>').css('color', 'red'); work?

angularjs

jqlite