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

Question

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

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>

if you need to apply a css class based on some logic, look at ng-class, but not attempt to change the css as you do in jquery. — Diana R, Oct 09 '15 at 18:29
This is just an example. The example could have used something like `.text()`, but I thought a color of red would be more clear. — Adam Zerner, Oct 09 '15 at 18:31
if you need for example to access the data from an input field, that just have `` and in controller you just access it by `$scope.testMyVal`. Angular is completly different that jquery by the meaning of its usage. — Diana R, Oct 09 '15 at 18:32
Your missing the point of angularjs here. If you read carefully the documentation and go further in learning, you'll see that none of this is really necessary as angularjs provide a much better way of doing this : the dual binding. — Fernando Pinheiro, Oct 09 '15 at 18:34
I understand the advantage to using data binding, but there are still situations where it makes sense to manipulate the DOM using jqLite (why else would they have it). Regardless, my question remains. — Adam Zerner, Oct 09 '15 at 18:37
jqLite is useful in directives, but in controller and in such a simple need as you have here, it is useless. — Diana R, Oct 09 '15 at 18:41
I agree. I just used it in the controller as an example, not as a real world use case. — Adam Zerner, Oct 09 '15 at 18:42

davidmdem · Accepted Answer · 2015-10-09T18:50:02.213

1

According to the docs, angular.element takes in an "HTML string or DOMElement to be wrapped into jQuery."

The 2nd example doens't error out because you are in fact passing an HTML string. This will cause angular.element to return a newly created jQuery object instead of acting on an existing object.

You can illustrate this by assigning the new element to a variable:

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

This is equivalent to the behavior you would find in full jQuery:

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

The last example uses querySelector which returns the actual HTML DOM element. This is what Angular needs to operate on that existing element (unless you've included jQuery - then you can use selectors like you would in jQuery/example 1).

edited Oct 09 '15 at 18:50

answered Oct 09 '15 at 18:37

davidmdem

3,763
2
30
33

Right, so why doesn't the second example turn it red? – Adam Zerner Oct 09 '15 at 18:43
1

Because it's not acting on or selecting an existing element. It is creating a new `
` element and returning it. You can inspect the return by assigning it to a variable: `var newElement = angular.element('
');`. That new element can be acted on and added to the DOM.
– davidmdem Oct 09 '15 at 18:44
Ahhhh, I see - thank you! Can you add that point to your answer? – Adam Zerner Oct 09 '15 at 18:46

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

1 Answers1

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