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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
jquery实现抽奖功能
Oct 22 jQuery
前端实现文件的断点续传(前端文件提交+后端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
mysql建立外键
2006/11/25 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
php session安全问题分析
2011/06/24 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python正则分组的应用
2013/11/10 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
如何利用Python识别图片中的文字
2020/05/31 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
个人找工作自荐信格式
2013/09/21 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
高中生军训感言
2015/08/01 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang