AngularJS监听ng-repeat衬着完成

2019年8月24日 163次阅读 来源: Harpsichord1207

某个项目，我的网页中有一个列表<ul>元素，款式以下：

《AngularJS监听ng-repeat衬着完成》

实际上它是经由过程Angular的ng-repeat构成的，html中的代码是：

<li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li>

图中下方的新建清单button，点击以后就往lists数组中push了一个新的list对象，此时页面会自动衬着，也对应增添一个<li>，以下：

《AngularJS监听ng-repeat衬着完成》

注重MyList1一直是active状况的(class="active")，我的需求是新增list后，把新增的list设置为active，即在新增后就变成下面这类款式：

《AngularJS监听ng-repeat衬着完成》

刚开始我尝试在button对应的函数中，往lists数组中push了新的list对象后，运用document.getElementById猎取到新增的<li>对象，然后为其增加一个class="active"，效果发明猎取到的DOM对象为null，经由搜刮发明缘由是：往lists数组push对象后，数组发作转变，一切的<li>都邑从新衬着，在push完成以后立时去找新增的DOM对象，DOM还没衬着好，因此是猎取不到的。解法是：运用AngularJS的指令去监听ng-repeat是不是衬着完成，在衬着完成后，再去取新增的<li>对象，这个网上有许多相干的内容了，代码以下：

myapp.directive('repeatFinish', function ($timeout) {
    return {
        restrict: "C",
        link: function (scope, element, attr) {
            if(scope.$last === true){
                $timeout(function () {
                    scope.change_list(element[0]);
                }, 10);
            }
        }
    }
});

上述代码建立了一个名为repeatFinish的指令，restrict: "C"示意指令放在DOM的class中（驼峰情势，即class="repeat-finish"），scope.$last === true示意已衬着到了末了一个对象，此时实行change_list函数（定义在控制器中，功用是把当前active的对象作废active，然后设置传入的DOM对象为active），element[0]能够直接取到当前衬着的DOM元素。注重我运用了$timeout，10ms后实行change_list，我发明直接运用change_list照样会找不到DOM，缘由不明，期待大神解答。

    原文作者：Harpsichord1207
    原文地址: https://segmentfault.com/a/1190000013799303
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞