• 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>
    			
    

      

  • 相关阅读:
    Windows中目录及文件路径太长无法删除的解决方法
    html5--移动端视频video的android兼容,去除播放控件、全屏等
    npm scripts 使用指南
    如何在 React Native 中写一个自定义模块
    流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
    React.js 小书
    React.js 应用 UI 框架
    npm配置文件
    Linux 普通进程 后台进程 守护进程
    Linux下passwd和shadow文件内容详解
  • 原文地址:https://www.cnblogs.com/changyaoself/p/7382517.html
Copyright © 2020-2023  润新知