angularjs中compile的用法

用angularjs框架有利有弊，对于初学的小白来说，不能用jQuery感觉逻辑编写无从下手。添加dom元素到页面中该如操作呢，compile虽然用的少但是很重要。

///HTML

 <li class="addNew">
                    <input type="text" name="start" value="0"/>
                    <span> ＜ 预存话费 ＜ </span>
                    <input type="text" name="end" value="10000.00"/>
                    <input type="text" name="every" value="0.15"/>
                    <span>元/分钟</span>
                </li>

controller:['$scope','$compile',function($scope,$compile){
                //增加区间
                $scope.addRow=function(){
                    var compileFn=$compile(
                        '<li>'
                            +' <input type="text" name="start" value="6"/> '
                            +' <span> - </span> '
                            +' <input type="text" name="end" value="16"/> '
                            +' <span>个月</span> '
                            +' <span class="two">赠送</span> '
                            +' <input type="text" name="every" value="1"/> '
                            +' <span>个月</span> '
                        +'</li>'
                    );
                    var $dom=compileFn($scope);
                    $dom.appendTo(document.getElementsByClassName('addOther'));
                }