如何使用AngularJS監聽渲染

這次帶給大家如何使用AngularJS監聽渲染，使用AngularJS監聽渲染的注意事項有哪些，下面就是實戰案例，一起來看一下。

其實它是透過Angular的ng-repeat形成的，html中的程式碼是：

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

圖中下方的新清單button，點擊之後就往lists陣列中push了一個新的 list對象，此時頁面會自動渲染，也對應增加一個<li>，如下：

注意MyList1 一直是active狀態的(class="active")，我的需求是新增list後，把新增的 list設定為active，也就是新增後就變成下面這種樣式：

我嘗試在 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);
      }
    }
  }
});

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS做出滑鼠經過文字時彈出懸浮層特效

如何使用Angular元件互動

以上是如何使用AngularJS監聽渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！