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>
    			
    

      

  • 相关阅读:
    蓝屏的钙,好喝的钙
    正则
    JavaScript 获取当前时间戳 (3种方式)
    react-native upoad imagepicker
    xmlhttprequest请求
    修改配置使fiddler可以查看https请求
    安装composer
    判定 android IOS
    看端口任务
    squid 缓存Internet 软件
  • 原文地址:https://www.cnblogs.com/changyaoself/p/7382517.html
Copyright © 2011-2022 走看看