Angularjs插入Html片段，支持ng事件与作用域变量

网上搜到的方法都有问题，生成的模板并不能使用ng的方法，只是普通的页面。结合官方文档：

API Reference:$compile

实现了一个示例：

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上下文的变量的，就仿佛是直接嵌入在此处