22.调用element方法控制dom元素

最新推荐文章于 2022-09-21 09:41:38 发布

转载最新推荐文章于 2022-09-21 09:41:38 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mx2036/p/6781445.html

本文介绍如何使用AngularJS通过调用element方法实现DOM元素的动态添加与删除。具体包括使用$compile服务编译HTML字符串，并利用Angular.element进行DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html ng-app="a101">
<head lang="en">
    <meta charset="UTF-8">
    <title>T75-调用element方法控制dom元素</title>
    <script src="js/angular.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="c101" class="frame" id="control">
    <button ng-click="add()">添加元素</button>
    <button ng-click="del()">删除元素</button>
</div>
</body>

<script type="text/javascript">
    var app = angular.module("a101", []);
    app.controller("c101", function ($scope, $compile) {
        $scope.hello = 'hello,angular!';
        $scope.log = function () {
            console.log('这是动态添加的方法!');
        };
        var html = "<div ng-click='log()'>{{hello}}</div>";
        var template = angular.element(html);
        var newHtml = $compile(template)($scope);//编译
        $scope.add = function () {
            angular.element(
                    document.getElementById("control")).append(newHtml);

        };
        $scope.del = function () {
            if (newHtml) {
                newHtml.remove();
            }
        }
    });


</script>

</html>
---------------------------------------------------------------------------------
效果图：