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不能跳转到上一页面的问题解决方法
Mar 01 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
Javascript window对象详解
Nov 12 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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
5.PHP的其他功能
2006/10/09 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
Vue插件之滑动验证码
2019/09/21 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
Python切片用法实例教程
2014/09/08 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
在django中自定义字段Field详解
2019/12/03 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
pandas针对excel处理的实现
2021/01/15 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
护士实习鉴定范文
2013/12/22 职场文书
出生证明公证书
2014/04/09 职场文书
学校标语大全
2014/06/19 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
检讨书范文2000字
2015/01/28 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书