angularjs中的$sompile服务

来源：互联网发布：制作新闻的软件编辑：程序博客网时间：2024/06/07 02:52

$compile服务是Angularjs里比较重要但又很少手动调用的服务，通常我们使用的angularjs指令都是angularjs自动编译完成的，但有时我们可能需要手动编译，比如我们需要往现有的DOM结构里添加html代码，增加一列li，这是就需要用到$compile了。

$compile用于编译HTML片段或者DOM，形成模板函数并于scope函数联结。编译就是DOM遍历并匹配指令，执行指令对应的函数，并将所有函数执行返回的结果函数聚合形成单一的模板函数。

用法：

<!DOCTYPE html><html ng-app="myApp"><head>

<title>angular</title>

angular.module('myApp', [])

.controller('MyController',function ($scope, $compile) {

var vm =this;

vm.msg = 'hello';

// 创建编译函数

var compileFn = $compile('<div>{{appCtrl.msg}}</div>');

// 传入scope，得到编译好的dom对象(已封装为jqlite对象)

// 也可以用$scope.$new()创建继承的作用域

var $dom = compileFn($scope);

// 添加到文档中

$dom.appendTo('body');

})

</script></head><body ng-controller="MyController as appCtrl"></body></html>

通过$compile服务可以编译html字符串或dom对象或jqLite对象，然后得到一个编译函数，再传入$scope，就会在当前作用域进行编译，返回编译好的jqLite对象，这时就可以直接添加到文档中了（也可以先添加到文档再编译）。
编译的实质其实就是对dom对象解析，使dom对象与scope进行耦合，

阅读全文

0 0