网上搜到的方法都有问题,生成的模板并不能使用ng的方法,只是普通的页面。结合官方文档:
实现了一个示例:
comiple_directive.$inject=["$compileProvider"]
angular.module('myapp').config(comiple_directive)
function comiple_directive ($compileProvider) {
$compileProvider.directive('compile', ["$sce","$compile",function ($sce,$compile) {
function redraw(scope, element,new_ele){
element.html(new_ele);
$compile(element.contents())(scope);
}
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch 传入的模板是否发生变化
return scope.$eval(attrs.compile);
},
function(new_ele) {
redraw(scope, element,new_ele);
}
);
// 额外部分开始
scope.$watch(
function(scope) {
// 监督另一个变量是否发生变化,这里可以视业务需求删除或者扩展这个额外部分,
return scope.$eval(attrs.compileWatch);
},
function(new_ele) {
redraw(scope, element,scope.$eval(attrs.compile));
}
);
//额外部分结束
};
}]);
};
最后在页面里使用
<div compile="template" compile-watch="data"></div>
这里渲染出来的dom是可以正常读取这个scope上下文的变量的,就仿佛是直接嵌入在此处