Как я могу использовать методы jqLite в AngularJS

Question

Как я могу использовать методы jqLite в AngularJS

0

Как использовать методы qjLite в AngularJS? Я хочу добавить элемент '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>

Maksim 30 окт. 2015, в 10:10

Источник

0

то, что вы пытаетесь сделать, это манипулировать DOM ... это в угловом выражении должно быть сделано в директиве ... тогда вы можете захотеть добавить эту директиву в код при некотором условии, используйте $ compile, просто не забудьте добавить в него якорь ... и пример можно увидеть здесь odetocode.com/blogs/scott/archive/2014/05/07/…
Jony-Y 30 окт. 2015, в 09:30

Теги:

javascript

html

angularjs

jqlite

3 ответа

0

Вы делаете почти все правильно, за исключением: при использовании jqLite использование селектора очень ограничено. И как говорится в документации

... используйте только тег name name и вручную перемещайте DOM с помощью API, предоставляемых jqLite.

см. фрагмент, например.

тогда, когда вы используете эту команду var span = angular.element('<span> </span>'); вы создаете новый элемент span и в своем фрагменте кода этот новый элемент span не добавляется ни к дереву DOM. Если бы вы намеревались использовать уже существующий элемент span, который отображается в html-фрагменте, тогда вы не должны создавать новый, а выбирать существующий, а затем работать с ним.

И еще одно замечание, хотя и не обязательное, манипулирование 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>

Scantlight 30 окт. 2015, в 07:38

0

Если вы хотите использовать методы jQlite, u должен обернуть ваш html в angular.element(). В примере урсов все в порядке. Но u должен добавить ваш элемент span в любой существующий тег html на вашей странице. например: var myDiv = angular.element(document.getElementById("mydiv")) var span = angular.element('') span.append('

Запустить его

"); span.addClass( 'красный');
myDiv.append (диапазон)

Errorpro 30 окт. 2015, в 06:31

Ещё вопросы

то, что вы пытаетесь сделать, это манипулировать DOM ... это в угловом выражении должно быть сделано в директиве ... тогда вы можете захотеть добавить эту директиву в код при некотором условии, используйте $ compile, просто не забудьте добавить в него якорь ... и пример можно увидеть здесь odetocode.com/blogs/scott/archive/2014/05/07/…

Anand Ghaywankar · Accepted Answer · 2015-10-30T07-08-00.000Z

Создайте директиву для работы с элементом 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>

Вы можете найти список подмножества методов jQuery, которые jqLite предоставляет на странице ссылок для angular.element .