首页 > 其他 > 详细

调用element方法控制dom元素

时间:2017-04-28 15:20:56      阅读:272      评论:0      收藏:0      [点我收藏+]
<!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>

调用element方法控制dom元素

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!