$compile 手动编译

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其实也是一样的过程。
 
 
例二：
<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>
 
 

 