AngularJS 不得不了解的服务 $compile 用于动态显示html内容
2016-12-13 18:25
926 查看
项目中一度纠结与AngularJS如何动态显示不同的html内容。
本来是希望直接使用下面的语句来实现:
1 | <div> </div> |
谷哥了一番,没想到在官网上就找到了我想要实现的效果,而实现的主角就是今天的 $compile 服务。
https://docs.angularjs.org/api/ng/service/$compile
节选一下关键部分内容,Javascript:
1234567891011121314151617181920212223242526272829303132 | <script> angular.module('compileExample', [], function($compileProvider) { // configure new 'compile' directive by passing a directive // factory function. The factory function injects the '$compile' $compileProvider.directive('compile', function($compile) { // directive factory creates a link function return function(scope, element, attrs) { scope.$watch( function(scope) { // watch the 'compile' expression for changes return scope.$eval(attrs.compile); }, function(value) { // when the 'compile' expression changes // assign it into the current DOM element.html(value); // compile the new DOM and link it to the current // scope. // NOTE: we only compile .childNodes so that // we don't get into infinite loop compiling ourselves $compile(element.contents())(scope); } ); }; }); }) .controller('GreeterController', ['$scope', function($scope) { $scope.name = 'Angular'; $scope.html = 'Hello '; }]);</script> |
12345 | <div ng-controller="GreeterController"> <input ng-model="name"> <br> <textarea ng-model="html"></textarea> <br> <div compile="html"></div></div> |
我基本就是直接copy过来就可以用了,各位看官自便咯~
♦ 本文固定连接:http://gsgundam.com/2014-12-13-angularjs-compile-to-show-dymanic-html-content/
♦ 转载请注明:GSGundam 2014年12月13日发布于 GSGUNDAM砍柴工
相关文章推荐
- AngularJS 不得不了解的服务 $compile 用于动态显示html内容
- 【转载】AngularJS 用$sce服务来过滤HTML标签,解决无法正确显示后台传递的html标签
- 对angularJs中$sce服务安全显示html文本的实例
- WebBrowser 显示Html内容不得不知的技巧
- HTML,angularJS表格内容排序,点击删除,删除当前,输入内容显示包含内容的数据
- angularJs中$sce服务安全显示html文本
- Thinksea HtmlRotator 是一个用于轮换显示HTML内容的控件。
- angularjs初始化时不显示模板内容, 不显示html, 不显示template
- html动态添加需要显示的内容/文字过多,超出部分以省略号显示,鼠标移入时全部显示
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 动态添加html内容(insertAdjacentHTML和insertAdjacentText)
- 根据要显示的字段个数动态生成表格标签table及内容
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- html中折行显示内容
- 动态创建服务器控件,获取HTML输出(用于生成静态文件,简化页面,简化编程等)