當(dāng)前位置：
首頁 >
22.调用element方法控制dom元素
發(fā)布時(shí)間：2025/7/14
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
22.调用element方法控制dom元素
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html ng-app="a101">
<head lang="en">
<meta charset="UTF-8">
<title>T75-調(diào)用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('這是動(dòng)態(tài)添加的方法!');
};
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>
---------------------------------------------------------------------------------
效果圖：
<html ng-app="a101">
<head lang="en">
<meta charset="UTF-8">
<title>T75-調(diào)用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('這是動(dòng)態(tài)添加的方法!');
};
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>
---------------------------------------------------------------------------------
效果圖：
轉(zhuǎn)載于:https://www.cnblogs.com/mx2036/p/6781445.html
總結(jié)
以上是生活随笔為你收集整理的22.调用element方法控制dom元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CodeForces 390E Inna
- 下一篇： Kattis之旅——Prime Redu