Question

如何在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>

Answer 1

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

尝试以下

＆＃13;

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');
        }
    }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果你想使用jQlite方法，你应该将你的html包装在angular.element（）中。在我的例子中，一切都很好。但是你应该将你的span元素追加到你页面上任何现有的html标签中。例如： var myDiv = angular.element（document.getElementById（“mydiv”）） var span = angular.element（''） span.append（'

运行它

'）; span.addClass（ '红'）;
myDiv.append（跨度）

Answer 3

你做的几乎没事，除了：使用jqLite时，选择器的使用非常有限。正如文档所说

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

请参阅代码段。

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

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

＆＃13;

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');
        
});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

如何在AngularJS中使用jqLite的方法

3 个答案:

如何在AngularJS中使用jqLit​​e的方法

3 个答案:

如何在AngularJS中使用jqLite的方法