How can I use methods of jqLite in AngularJS

Question

How to use methods's of qjLite in AngularJS? I want to add 'p' html element and following to add class="red" .

Maybe I something doing wrong...

Here code which I wrote:

angular.module('app', [])
 .controller('ctrl', function($scope){
 $scope.text = 'Test';
 });

 var span = angular.element('<span> </span>');

 span.append('<p>Run it</p>');
 span.addClass('red');

 .red{
 color: red;
 font-size: 60px;
 }

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<p ng-bind="text"></p>
<span></span>
</body>
</html>

what you're trying to do is manipulate the DOM... this in angular should be done within a directive... then you might want to add that directive to the code on some condition use $compile just remember to append it an anchor... and example can be seen here http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx — Jony-Y, Oct 30 '15 at 09:30

score 1 · Accepted Answer · edited Oct 30 '15 at 10:18

1

Create directive to work with DOM element and then use jqLite methods. The jQlite is similar to jQuery but to use them in Angular Create directive, wherein the element is accessible

Try below

var myApp = angular.module('myApp',[]);

 myApp.controller('ctrl', function($scope){
 $scope.text = 'Test';
   
 });
myApp.directive('addElement', function() {
    return {
        restrict: 'EA',
        replace: false,
        link: function(scope, element) {
             element.html('<p>Run it</p>');
 element.addClass('red');
        }
    }
});

.red{
 color: red;
 font-size: 60px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

<body ng-app="myApp" ng-controller="ctrl">
<p ng-bind="text"></p>
<span add-element></span>

edited Oct 30 '15 at 10:18

Jony-Y

1,579
1
13
30

answered Oct 30 '15 at 09:29

Anand G

3,130
1
22
28

Thanks you. I understand all. – Maksim Oct 30 '15 at 09:37
1

You can find a list of the subset of jQuery methods that **jqLite** provides on the reference page for [`angular.element`](https://docs.angularjs.org/api/ng/function/angular.element). – Van J. Wilson Jan 06 '16 at 01:32

score 0 · Answer 2 · answered Oct 30 '15 at 09:28

If you want to use jQlite methods u should wrap your html in angular.element(). In urs example everything is ok. But u should append yours span element into any existing html tag on yours page. for example: var myDiv = angular.element(document.getElementById("mydiv")) var span = angular.element(' ') span.append('

Run it

'); span.addClass('red');
myDiv.append(span)

score 0 · Answer 3 · answered Oct 30 '15 at 09:37

You are doing almost all right except: When using jqLite, selector usage is very limited. And as documentation says

... only use tag name selectors and manually traverse the DOM using the APIs provided by jqLite.

see snippet for example.

then, when you use this command var span = angular.element('<span> </span>'); you create a new span element and in your code snippet this new span element is not appended to DOM tree in any way. If your intention was to use an already existing span element which is seen in html snippet then you should not create a new one but select the existing and then operate on it.

And another observation, although not mandatory, DOM manipulation should be done inside controller or better create a new directive for that. In this way you ensure that document is ready for manipulation also as you controller data.

angular.module('app', [])
    .controller('ctrl', function($scope){
        $scope.text = 'Test';

        var span = angular.element(document).find('body').find('span');
        span.append('<p>Run it</p>');
        span.addClass('red');
        
});

 .red{
 color: red;
 font-size: 60px;
 }

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<p ng-bind="text"></p>
<span></span>
</body>
</html>

How can I use methods of jqLite in AngularJS

3 Answers3