AngularJS实现动态编译添加到dom中的方法  更新时间:2016年11月04日 10:45:29   作者:自由港   这篇文章主要介绍了AngularJS实现动态编译添加到dom中的方法,结合实例形式分析了AngularJS动态编辑构建模板的相关操作技巧,需要的朋友可以参考下 本文实例讲述了AngularJS实现动态编译添加到dom中的方法。分享给大家供大家参考,具体如下: 在使用angularjs 时,希望通过动态构建angular模版,再通过angular进行展示。 使用 方法如下: var html=”{{userName}}”; 这种代码就是angular模版,通过angularjs的编译器进行编译,就能够访问到angular scope中的对象数据。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 详解为生产环境编译Angular2应用的方法 利用angular自动编译andriod APK的绕坑经历分享 AngularJS dom 相关文章 Angular5集成eventbus的示例代码 这篇文章主要介绍了Angular5集成eventbus的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-07-07 Angular2 Service实现简单音乐播放器服务 本篇文章主要介绍了Angular2 Service实现简单音乐播放器服务 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-02-02 AngularJS指令与控制器之间的交互功能示例 这篇文章主要介绍了AngularJS指令与控制器之间的交互功能,结合实例形式分析了AngularJS控制器调用相关指令操作技巧,需要的朋友可以参考下 2016-12-12 angular2路由之routerLinkActive指令【推荐】 这篇文章主要介绍了angular2路由之routerLinkActive指令的相关资料,需要的朋友可以参考下 2018-05-05 angular基于ng-alain定义自己的select组件示例 这篇文章主要介绍了angular基于ng-alain定义自己的select组件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-02-02 AngularJS的$location使用方法详解 这篇文章主要介绍了AngularJS的$location使用方法详解的相关资料,希望通过本文大家能够掌握这部分内容,需要的朋友可以参考下 2017-10-10 angularJs中json数据转换与本地存储的实例 今天小编就为大家分享一篇angularJs中json数据转换与本地存储的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 AngularJS ng-table插件设置排序 这篇文章主要介绍了AngularJS ng-table插件设置排序的相关资料,需要的朋友可以参考下 2016-09-09 Angular 实现输入框中显示文章标签的实例代码 这篇文章主要介绍了Angular 实现输入框中显示文章标签的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-11-11 Angularjs修改密码的实例代码 这篇文章主要介绍了Angularjs修改密码的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-05-05 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • 详解为生产环境编译Angular2应用的方法
  • 利用angular自动编译andriod APK的绕坑经历分享
张贴在3