为什么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>
答案 0 :(得分:1)
根据docs,angular.element
接受“HTML字符串或DOMElement包装到jQuery中。”
第二个例子没有错误,因为你实际上传递了一个HTML字符串。这将导致angular.element
返回新创建的jQuery对象,而不是对现有对象进行操作。
您可以通过将新元素分配给变量来说明这一点:
var newElement = angular.element('<p>');
这相当于你在完整的jQuery中找到的行为:
var newElement = $('<p>');
最后一个示例使用querySelector
返回实际的HTML DOM元素。这就是Angular需要对现有元素进行操作的内容(除非你已经包含了jQuery - 然后你可以像使用jQuery / example 1那样使用选择器)。