当前位置: 首页 > 编程笔记 >

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

令狐声
2023-03-14
本文向大家介绍AngularJS实现动态编译添加到dom中的方法,包括了AngularJS实现动态编译添加到dom中的方法的使用技巧和注意事项,需要的朋友参考一下

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

 类似资料:
  • 本文向大家介绍Angularjs 实现动态添加控件功能,包括了Angularjs 实现动态添加控件功能的使用技巧和注意事项,需要的朋友参考一下 实现下面这样的需求: 点击增加一块数据盘,会出现数据盘选项。 (1)最开始,想到原生JavaScript,jQuery (appendChild()等方法结合AngularJS来添加新的元素。但是突然发现控件里面的数据绑定,原生javascript没法控制

  • 本文向大家介绍C#中GridView动态添加列的实现方法,包括了C#中GridView动态添加列的实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了C#中GridView动态添加列的实现方法。分享给大家供大家参考。具体如下: 希望本文所述对大家的C#程序设计有所帮助。

  • 我正在重新编写这个问题,因为我认为原文不太清楚。 基本上,我有一个“wrapper”指令,在该指令中,我试图动态地将属性添加到一个已包装(转包)的元素中。我可以让它工作,但Angular似乎不知道一旦添加了新属性。 如果我使用,Angular确实可以识别它们——但代价是加倍编译转置的内容,在这种情况下,它会加倍标记中的

  • 本文向大家介绍PHP实现动态添加XML中数据的方法,包括了PHP实现动态添加XML中数据的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了PHP实现动态添加XML中数据的方法。分享给大家供大家参考,具体如下: 前面简单讲述了xml文档的创建,这里继续讨论xml中数据的动态添加: 一. 代码 二. 运行结果 PS:这里再为大家提供几款关于xml操作的在线工具供大家参考使用: 在线XML/

  • 本文向大家介绍javascript的document中的动态添加标签实现方法,包括了javascript的document中的动态添加标签实现方法的使用技巧和注意事项,需要的朋友参考一下 document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数。我们可以利用这些函数动态改变html的节点。 1、JavaScript 2.b

  • 本文向大家介绍JQuery动态添加Select的Option元素实现方法,包括了JQuery动态添加Select的Option元素实现方法的使用技巧和注意事项,需要的朋友参考一下 如下所示: 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。