如何在AngularJS中使用jqLite的方法
[英]How can I use methods of jqLite in AngularJS
问题描述
How to use methods's of qjLite in AngularJS? 
如何在AngularJS中使用qjLite的方法？ I want to add 'p' html element and following to add class="red" . 我想添加'p'html元素，然后添加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>
3 个解决方案
解决方案1
1 已采纳 2015-10-30 09:29:40
Create directive to work with DOM element and then use jqLite methods. 创建指令以使用DOM元素，然后使用jqLite方法。 The jQlite is similar to jQuery but to use them in Angular Create directive, wherein the element is accessible jQlite与jQuery类似，但要在Angular Create指令中使用它们，其中元素可访问
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>
解决方案2
0 2015-10-30 09:28:01
If you want to use jQlite methods u should wrap your html in angular.element(). 如果要使用jQlite方法，则应将html包装在angular.element（）中。 In urs example everything is ok. 在我们的示例中，一切正常。 But u should append yours span element into any existing html tag on yours page. 但是您应该将您的span元素附加到您页面上任何现有的html标记中。 for example: var myDiv = angular.element(document.getElementById("mydiv")) var span = angular.element(' ') span.append(' 例如：var myDiv = angular.element（document.getElementById（“ mydiv”））var span = angular.element（''）span.append（'
Run it 运行
'）;
span.addClass('red');
span.addClass（'red'）;
myDiv.append(span)
myDiv.append（span）
解决方案3
0 2015-10-30 09:37:24
You are doing almost all right except: When using jqLite, selector usage is very limited. 您几乎可以做所有事情，除了：使用jqLite时，选择器的使用非常有限。 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>'); 然后，当您使用此命令时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. 您创建了一个新的span元素，并且在代码段中，这个新的span元素没有以任何方式附加到DOM树。 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. 如果您打算使用在html片段中可以看到的已经存在的span元素，那么您不应该创建一个新的span元素，而是选择一个现有的span元素然后对其进行操作。
And another observation, although not mandatory, DOM manipulation should be done inside controller or better create a new directive for that. 还有另一个观察结果，尽管不是强制性的，但应该在控制器内部完成DOM操作，或者更好地为此创建一个新指令。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.