I have seen tutorials and other articles saying to not even include jQuery into a project when using Angular.js in order to make the transition as thorough as possible. However, how do we do simple DOM manipulations to css and other things like $('.item').css('top', '50px'); using only Angular? (or is this not possible)?
Asked
Active
Viewed 490 times
0
tewathia
- 6,890
- 3
- 22
- 27
Matt Hintzke
- 7,744
- 16
- 55
- 113
5 Answers
1
This is possible using the ng-class directive. On your element, you would say:
<div ng-class="{'classWithTop50':myScopeVariable}"></div>
Where classWithTop50 is defined in css as:
.classWithTop50{
top:50px;
}
When $scope.myScopeVariable is true, the element will have the class .classWithTop50
C Fairweather
- 696
- 4
- 20
-
I'm sorry, but I don't think I am getting my point across.. How can I dynamically change the CSS of the element, like I can using jQuery? – Matt Hintzke Jan 10 '14 at 07:06
-
You should see the other answers for that resolution. The preferred way, if you're using angular, is to *not* manipulate elements directly and instead use declarative styling based on classes. This way, they're driven by the model, and you never actually have to manually change styles on elements. Trust me; your life becomes easier when you get away from dom manipuation. – C Fairweather Jan 10 '14 at 07:09
1
You can add classes like in ansewer reported by fairweather or you can also use ng-style to dynamically style the elements. If you want more DOM manipulation then you can create a Directive for that element and do all the stuff using jqlite in the directive.
Kop4lyf
- 4,520
- 1
- 25
- 31
0
Angular comes with a lite version of jQuery, which allows a subset of jQuery. You can still include jQuery if you like (should be included before Angular).
null
- 7,906
- 3
- 36
- 37
0
Angular comes with a lite version of jQuery, which allows a subset of jQuery.
You can use this :
angular.element('.item').css('top', '50px');
EpokK
- 38,062
- 9
- 61
- 69
0
Use ng-class directive:
(from angular doc)
<p ng-class="{'strike': deleted, 'bold': important, 'red': error}">Map Syntax Example</p>
=> this add the class 'strike' when the scope variable $scope.deleted == true, add the 'bold' class when $scope.important == true ...
Angular doc : http://docs.angularjs.org/api/ng.directive:ngClass
Don't think in jQuery, think in Angular (M-V-*). angular.element() is there for directives DOM manipulations. DOM updates should be done with angular directives; css updates and animations with css classes.
