zoukankan      html  css  js  c++  java
  • angular $compile的使用

      在写前端js时,经常会动态创建标签放入文本元素中:

    比如:var strDiv='<div>new create element</div>';

       $(strDiv).appendTo($('div'));

    在使用angular做项目时,有时也会需要动态来创建标签。那么由于angular的安全机制,是否会被angular编译;

    如:var strDiv='<div>{{angular.bind}}</div>';  //这里用到了angular的绑定。

       $(strDiv).appendTo($('div'));

    验证:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="" ng-app='app' ng-controller='controller'>
    			<!--<h1>实践$compile</h1>--> <!--通过angular 来动态添加这一句-->
    		</div>
    		<script type="text/javascript">
    			var app=angular.module('app',[]);
    			app.controller('controller',function($compile,$scope){
    				/* js 动态创建*/
    				$scope.appearText='创建成功,angular绑定是否成功';
    				var string='<h1 id="isSuccess">{{appearText}}</h1>';
    				$(string).appendTo($('div'));				
    			})
    		</script>
    	</body>
    </html>
    		
    

      

    由此可以看的出来,js动态创建的标签使用angular绑定并不会被识别和编译。

    所以$compile是将创建出来的标签重新编译一下,被angular识别,这样元素将享受angular一切的待遇。

    验证:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="" ng-app='app' ng-controller='controller'>
    			<!--<h1>实践$compile</h1>--> <!--通过angular 来动态添加这一句-->
    		</div>
    		<script type="text/javascript">
    			var app=angular.module('app',[]);
    			app.controller('controller',function($compile,$scope){
    				/* angualr 动态创建*/
    				$scope.appearText='创建成功,angular绑定是否成功';
    				var compile=$compile("<h1>{{appearText}}</h1>");
    				$(compile($scope)).appendTo($('div'));				
    			})
    		</script>
    	</body>
    </html>
    			
    

      

  • 相关阅读:
    为mongoDB加用户权限管理
    手机号归属地查询接口
    关于微信小程序
    linux交互执行命令,expect
    apache配置跨域请求代理
    Linux(Mac)常用命令
    解决:配置虚拟主机,重启apache,[warn] _default_ VirtualHost overlap on port 80, the first has precedence
    linux下grep分析apache日志的命令集合
    解决Macbook Pro蓝牙不可用问题
    Apache如何开启Gzip压缩
  • 原文地址:https://www.cnblogs.com/changyaoself/p/7382517.html
Copyright © 2011-2022 走看看