如何在 AngularJS 中使用 jqLite 的方法答案

【问题标题】：How can I use methods of jqLite in AngularJS如何在 AngularJS 中使用 jqLite 的方法
【发布时间】：2015-10-30 08:56:37
【问题描述】：

如何在AngularJS中使用qjLite的方法？我想添加 'p' html 元素，然后添加 class="red" 。

也许我做错了什么......

这是我写的代码：

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>

【问题讨论】：

您想要做的是操作 DOM...这在角度应该在指令中完成...然后您可能希望在某些条件下将该指令添加到代码中使用 $编译只记得给它附加一个锚点......示例可以在这里看到odetocode.com/blogs/scott/archive/2014/05/07/…

标签： javascript html angularjs jqlite

【解决方案1】：

创建指令以使用 DOM 元素，然后使用 jqLite 方法。 jQlite 类似于 jQuery，但在 Angular Create 指令中使用它们，其中元素是可访问的

试试下面

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>

【讨论】：

谢谢。我都明白了。
您可以在angular.element 的参考页面上找到 jqLite 提供的 jQuery 方法子集列表。

【解决方案2】：

如果你想使用 jQlite 方法，你应该将你的 html 包装在 angular.element() 中。在我们的示例中，一切正常。但是您应该将您的 span 元素附加到您页面上的任何现有 html 标记中。例如： var myDiv = angular.element(document.getElementById("mydiv")) var span = angular.element(' ') span.append('

运行它

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

【讨论】：

【解决方案3】：

除了：使用 jqLite 时，选择器的使用非常有限。正如文档所说

... 只使用标签名称选择器，并使用 jqLite 提供的 API 手动遍历 DOM。

以 sn-p 为例。

然后，当您使用此命令var span = angular.element('<span> </span>'); 时，您会创建一个新的 span 元素，并且在您的代码 sn-p 中，这个新的 span 元素不会以任何方式附加到 DOM 树。如果您的意图是使用在 html sn-p 中看到的已经存在的 span 元素，那么您不应该创建一个新的，而是选择现有的，然后对其进行操作。

还有一个观察，虽然不是强制性的，DOM 操作应该在控制器内部完成，或者更好地为此创建一个新指令。通过这种方式，您可以确保文档在您控制数据时也可以进行操作。

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>

【讨论】：