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中的对象数据。

时间: 2024-08-06 11:49:09

ANGULARJS 动态编译添加到dom中的相关文章

动态编译添加php模块

注意:转载请注明出处:http://www.programfish.com/blog/?p=85 在很多时候我们用linux里搭建web服务器的时候会需要编译安装php套件,而在编译安装后可能又会需要添加一些编译安装时没有指定要编译进去的模块,例如如下情况: mysql.so 或mysqli.so .mbstring.so  zlib.so 等模块. 这里提示一下: 如果你有安装过phpmyadmin而且在安装配置好之后打开首页是空白的,那么很有可能就是你的php没有mysql和mbstring

angularjs 动态表单, 原生事件中调用angular方法

https://www.cnblogs.com/wancy86/p/7834067.html 1. 原生事件中调用angular方法, 比如 input的onChange事件想调用angular里面定义的方法 - onChange="angular.element(this).scope().uploadPhoto(this)" <div class="col-md-2"> <input onChange="angular.element

转: angularjs 指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效

angular的坑很多 例子: 在directive的link中有一个$http请求,当请求完成后根据返回的值动态做element.append('......');这个操作, 能显示没问题,可问题是我动态组的HTML里面有ng-click,发现显示出来的内容根本不执行ng-click绑定的方法! 这个是因为异步返回之后,指令的编译已经完成,因此需要动态编译. 使用$compile服务! 在link方法中对返回后的html代码经过$compile服务处理后再插入: var el=$compile

DOM中的动态NodeList与静态NodeList

GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在

让C#语言充当自身脚本!——.NET中的动态编译

原文:让C#语言充当自身脚本!--.NET中的动态编译 代码的动态编译并执行是.NET平台提供给我们的很强大的一个工具,用以灵活扩展(当然是面对内部开发人员)复杂而无法估算的逻辑,并通过一些额外的代码来扩展我们已有 的应用程序.这在很大程度上给我们提供了另外一种扩展的方式(当然这并不能算是严格意义上的扩展,但至少为我们提供了一种思路). 动态代码执行可以应用在诸如模板生成,外加逻辑扩展等一些场合.一个简单的例子,为了网站那的响应速度,HTML静态页面往往是我们最好的选择,但基于数据驱动的网站往往

写程序前不需指定数组中的常量,而是动态编译中决定

/*编译后输入两个一维数组大小分别为m和n,并将其存入二维数组dp中*/vector<int> v1,v2;m=v1.size();n=v2.size(); vector<vector<int>> dp; dp.resize(m); for (int i = 0; i <= m; ++i) { dp[i].resize(n); } resize()是扩容函数,可以在动态编译的时候指定数组的大小.

java动态编译类文件并加载到内存中

如果你想在动态编译并加载了class后,能够用hibernate的数据访问接口以面向对象的方式来操作该class类,请参考笔者的这篇博文-(该博文暂未发布) 所谓动态编译,就是在程序运行时产生java类,并编译成class文件. 一.这里介绍两种动态编译java文件的方式. 第一种:使用Runtime执行javac命令 /** * 编译java类 * 使用Runtime执行javac命令 * @param name 类的全限定包名 不带后缀 例如com.test.Notice 而不要写成com.

DOM中动态创建元素与jQuery中动态创建元素

DOM中动态创建元素与jQuery中动态创建元素 DOM中动态创建元素: 1. document.write("标签的代码")    缺点:页面中原有的元素会被覆盖掉 2. innerHTML 3. document.createElement("标签的名称") jQuery中动态创建元素: 1. $("标签的代码") 2. 对象.html("标签的代码") 原文地址:https://www.cnblogs.com/david

AngularJS如何编译和呈现页面

AngularJS如何编译和呈现页面? 页面加载,首先加载静态DOM,AngularJS随即加载,并寻找在页面的ng-app,然后开始编译所有moudlue内的所有service, controller,directive等,然后搜寻dom中的directive,并创建HTML模板,模板就有了自己的scope,scope中的数据显示到view上,最终呈现页面.而谈到编译,使用了AngularJS的一个service,叫做$compile. var app = angular.module('my