CODEWITHSUNDEEP
javascripthtmlangularjsjqlite
Maksim
Maksim

Reputation: 155

How can I use methods of jqLite in AngularJS

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>

Upvotes: 0

Views: 5604

Answers (3)

Anand G
Anand G

Reputation: 3210

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>

Upvotes: 1

Scantlight
Scantlight

Reputation: 253

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>

Upvotes: 0

Errorpro
Errorpro

Reputation: 2423

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)

Upvotes: 0

Related Questions