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>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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments