angularjs中compile的用法

最新推荐文章于 2021-06-16 19:38:06 发布

Manson_zh

最新推荐文章于 2021-06-16 19:38:06 发布

阅读量4.4k

点赞数

分类专栏： Angularjs 文章标签： angularjs中compile的用法

本文链接：https://blog.csdn.net/Manson_zh/article/details/71424976

版权

Angularjs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用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>

将片段插入到上面HTML片段后面
///js

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'));
                }

addRow绑定在一个按钮上，就可以实现了