AngularJS实现动态编译添加到dom中的方法


Posted in Javascript onNovember 04, 2016

本文实例讲述了AngularJS实现动态编译添加到dom中的方法。分享给大家供大家参考,具体如下:

在使用angularjs 时,希望通过动态构建angular模版,再通过angular进行展示。

使用 方法如下:

<html ng-app="app">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="assets/angular.min.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/handlebars.min.js"></script>
  <script src="assets/Handlebars.helper.js"></script>
  <script >
  var app=angular.module("app",[]);
  app.controller('ctrl', ['$scope','$compile',function($scope,$compile){
    $scope.userName='RAY';
    $scope.test = function test(){
      console.log('你好:' +$scope.userName);
    }
    //通过$compile动态编译html
    var html="<button ng-click='test()'>{{userName}}</button>";
    var template = angular.element(html);
    var mobileDialogElement = $compile(template)($scope);
    angular.element(document.body).append(mobileDialogElement);
  }]);
  </script>
</head>
<body ng-controller="ctrl">
</body>
</html>
var html="<button ng-click='test()'>{{userName}}</button>";

这种代码就是angular模版,通过angularjs的编译器进行编译,就能够访问到angular scope中的对象数据。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 #Javascript
AngularJS中watch监听用法分析
Nov 04 #Javascript
AngularJS中的DOM操作用法分析
Nov 04 #Javascript
JS对大量数据进行多重过滤的方法
Nov 04 #Javascript
AngularJS模板加载用法详解
Nov 04 #Javascript
jQuery 遍历map()方法详解
Nov 04 #Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 #Javascript
You might like
php+mysql写的简单留言本实例代码
2008/07/25 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php目录拷贝实现方法
2015/07/10 PHP
php显示页码分页类的封装
2017/06/08 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
jquery replace方法去空格
2017/05/08 jQuery
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python循环语句中else的用法总结
2016/09/11 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
会议室使用管理制度
2015/08/06 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
多人股份制合作协议书
2016/03/19 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏