$compile 手动编译
2024-06-09 14:20:01
angularjs里比较重要但又很少手动调用的要属$compile服务了,通常在写组件或指令时,都是angularjs自动编译完成的,但有时我们可能需要手动编译,比如封装一个table组件,根据参数实现自定义渲染,增加一列复选框或者一列按钮啥的,这是就需要用到$compile了。
例一:
<
body ng-app="myApp"
ng-controller
=
"MyController"
>
</
body
>
<
script
>
angular.module('myApp', [])
.controller('MyController', function ($scope, $compile) {
//这个this是指控制器MyController
var vm = this;
vm.msg = 'hello';
// 创建编译函数
var compileFn = $compile('<
p
>{{vm.msg}}</
p
>');
// 传入scope,得到编译好的dom对象(已封装为jqlite对象)
var $dom = compileFn($scope);
// 添加到文档中
$dom.appendTo('body');
//合起来的写法
body.append($compile('
<p
>{{vm.msg}}</
p
>'
)($scope));
})
</
script
>
通过$compile服务可以编译html字符串或dom对象或jqLite对象,然后得到一个编译函数,再传入$scope,就会在当前作用域进行编译,返回编译好的jqLite对象,这时就可以直接添加到文档中了(也可以先添加到文档再编译)。
编译的实质其实就是对dom对象解析,使dom对象与scope进行耦合,通过绑定可以实现数据的更新,像Vue其实也是一样的过程。
编译的实质其实就是对dom对象解析,使dom对象与scope进行耦合,通过绑定可以实现数据的更新,像Vue其实也是一样的过程。
例二:
<
body
ng-controller
=
"MyController as appCtrl"
>
<
p
use=
"appCtrl.html"
></
p
>
</
body
>
<
script
>
angular.module('myApp', [])
.controller('MyController', function ($scope, $compile, $timeout) {
var vm = this;
vm.html = '<
h1
>{{title}}</
h1
>\
<
ul
>\
<
li
ng-repeat
=
"item in items"
>{{item}}</
li
>\
</
ul
>'
})
.directive('use', function($compile) {
return {
restrictive:"EA",
scope: {
use
: '='
},
link: function(scope, elem, attrs) {
scope.title = 'list';
scope.items = ['list1', 'list2', 'list3'];
elem.html($compile(scope.use)(scope))
}
}
})
</
script
>
转载于:https://www.cnblogs.com/yogic/p/8297007.html
最新文章
- 关于Vision Transformer的一些思考
- 记一次 Kubernetes 集群被入侵,服务器变矿机
- 设计模式(十五)享元模式(结构型)
- lua中的魔法字符转义问题
- 2.2.5 调度算法:时间片轮转 优先级调度 多级反馈队列
- 全球及中国医用腋拐行业竞争格局及供需前景预测报告2021年版
- mysql选择索引逻辑_Mysql索引选择逻辑
- 《钢铁神兵》里的较量的数学题,都是什么级别的难题?
- php curl 关闭tcp连接,BASH CURL:顺序运行时,请勿关闭请求之间的连接
- QQ浏览器如何修改截屏快捷键?QQ浏览器修改截屏快捷键的方法
- Vue中拆分视图层代码的5点建议
- python psutil.disk_python中psutil模块使用相关笔记
- Office LTSC 2021 for Mac
- 习题合集-数据结构导论
- pbs分解_Visual Paradigm使用技巧:产品分解结构(PBS)的使用
- 今天QQ被盗,异常情况调查与反思
- 微信公众号只能设置两个网页授权域名的解决方案
- gif制作——电脑完全免费GIF录制工具下载
- 按键精灵识别不出图片
- 【Uni-App】点击分享,生成海报带二维码,保存到本地图片,写入文字