1. 程式人生 > >angularJS指令ng-repeat生成的dom元素js獲取不到

angularJS指令ng-repeat生成的dom元素js獲取不到

用ng-repeat生成的元素用js怎麼也獲取不到

這個其中原由是:angular擁有自動化渲染DOM的特性,它能幫助我們專注於操作資料,而頁面的渲染則由angular自身來完成。這就造成了 ng-repeat 迴圈完成後angular並不會告訴我們dom渲染完了;換句話說就是不知道angular渲染dom何時完成(得不到生成的元素是因為這個元素還沒有渲染出來)。

也就是說要找一個方法使你知道什麼時候angular渲染dom完成了,你再才來操作dom,得到你想要的元素、進行操作。。。。

<div ng-repeat="item in items" on-finish>
    <div>{{item.name}}}<div>
</div>
//js
var module = angular.module('fang', [])
    .directive('onFinish', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }});
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //這裡寫獲取dom的操作,
});


這樣你就可以用js找到ng-repeat生成的元素了;並進行相關元素操作。

相關推薦

angularJS指令ng-repeat生成dom元素js獲取

用ng-repeat生成的元素用js怎麼也獲取不到 這個其中原由是:angular擁有自動化渲染DOM的特性,它能幫助我們專注於操作資料,而頁面的渲染則由angular自身來完成。這就造成了 ng-repeat 迴圈完成後angular並不會告訴我們dom渲染完了;換句

angularJsng-repeat遍歷動態生成的表單元素繫結ng-model無效的問題

  我在做練習中偶然遇到這個問題,與大家分享一下。我也是剛開始接觸angularJs,相信也有人同樣遇到過。   問題描述:在使用anjularJs框架核心模組ng雙向資料繫結,在ng-repeat遍歷物件或陣列的時候,用ng-model繫結動態生成表單元素時,利用$sco

angularjsng-repeat和filter)生成多級選單

需求如下: 後端通過資料庫生成無序的陣列,傳到前端,資料結構如下(pid即parentId,如本級的pid為4,則它上一級的menu_id為4): [ {pid:1,menu_id:7}, {pid:4,menu_id

AngularJSng-repeat迴圈中如何獲得被迴圈列表的索引值

使用angularJS框架的話都需要引入angular.min.js檔案,這個想必各位大佬都懂得,我就不多說了。 這裡主要說說AngularJS的ng-repeat迴圈中如何獲得被迴圈列表的索引值。 假如有一個表格: 程式碼如下: <table class="tabl

angularjs中,ng-hide隱藏的元素,設定了style

做一個搜尋歷史框,input獲得焦點就顯示搜尋歷史框,框寬度與input框同寬(因為input後還有一個搜尋按鈕呢)否則不顯示。 在獲得焦點的函式中,已經把flag賦值為true了,卻還是不能執行下面

AngularJsng-repeat中動態使用ng-model進行雙向資料繫結

首先說明一下功能需求: 當點選一次增加按鈕的時候,下方就會多一行輸入框; 當點選一次刪除按鈕的時候,所點選的刪除按鈕那行的輸入框會消失; 當點選列印資訊按鈕的時候,把所有輸入框中的資料讀取出來,並列印到控制檯上。 由此可看出,帶有刪除按鈕的這部分DIV是動態的。

AngularJSng-repeat渲染完成事件和中間變數的引用

ng-repeat渲染完成事件 因為在用AngularJS期間, 經常用到ng-repeat, 而有時需要在其渲染完成時操作已經渲染的物件, 所以特在此記錄一下新增渲染事件的方法, 以方便以後的使用; 程式碼如下 myApp.directive('onRepeatFin

AngularJSng-repeat使用心得

ng-repeat這樣類似的指令是會建立一個新的作用域的,並且建立的新的作用域是原型繼承的。這點其實和我的一篇《AngularUI之Modal的子作用域研究 》類似,這次我也對指令的子作用域進行了研究,發現他們的建立子作用的方式是一樣的。 下面是我的實驗程式碼

解決AngularJSng-repeat更新檢視的問題

最近寫AngularJS專案中,遇到一個問題,先對陣列進行賦值,ng--repeat正常工作,然後對陣列進行修改,ng-repeat似乎沒有工作,檢視沒有更新。 原因是ng-repeat會已預設值排序,由於我的陣列中的元素有重複,所以ng-repeat沒有對重複的元素進行

Angularjsng-repeat與移動端滑動外掛iScroll的衝突

IScroll是在移動端開發的過程中會經常使用到的一個外掛,但當其與angularjs中的ng-repeat指令配合使用時,很有可能會導致iScroll外掛失效或者滑動不正常,另外當ng-repeat迴圈的列表動態增加時也會導致滑動不正常。 滑動不正常原因:

AngularJSng-repeat 排序後的 $index變化

“有客戶投訴,說在刪除指定的某條記錄時,結果刪掉的卻是另外一條記錄!” 看起來是個很嚴重的BUG。 有一次我們在工作中碰到了這個問題。 要定位這個BUG非常麻煩, 因為客戶也不清楚如何重現這個問題。 後來發現這個Bug是由於在 ng-repeat 中使用了 $inde

ng-repeatDOM的重新渲染機制

引子:專案中遇到一個BUG,使用ui-bootstrap-tpls中的carousel外掛設定輪播圖時,改變ng-repeat中陣列其中一個元素時,輪播圖的順序發生了變化。             程式碼如下:  <div carousel interval="ap

關於AngularJSng-repeat問題(問卷遍歷問題)

option_val = [];         var count = 0;         $scope.submitText = function () {             var type = document.getElementsByTagName("input");          

AngularJSAngularjs設定ng-repeat裡面迴圈出來的select的預設值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> &l

AngularJs使用ng-repeat實現資料迴圈展示的效果

一般情況下,後端給前端傳輸資料,前端都是用foreach來迴圈輸出,現在使用AngularJs也能實現類似的功能,方法如下:01<!doctype html>02<html lang=

js獲取帶單位的像素值

replace button onclick num parseint 數值 調用 寬度 字體   所謂獲取不帶單位的像素值就是獲取比如元素的寬度、高度、字體大小、外邊距、內邊距等值但是去掉像素單位。   比如:某一個元素的寬度是100px,現在我要獲取這個這個值但是不帶

Tomcat7在前端JS獲取到cookie問題(附上獲取cookie/JS

tomcat7中的context.xml加上這個屬性就可以了, 如果程式設計師後端控制cookie.setHttpOnly(false) ​ window.onload=function (){ function getSessionId(){ var c_na

js 獲取到div的寬度 offsetWidth width

1、通過document.getElementById("zhankaiStyle").style.width 或者是  this.$refs.mingzi.style.width 獲取     只能通過在行內樣式表中設定寬度才可以獲得 (1) <

css設定height:100%,用js獲取到高度值問題

工作中用到的amaze ui的popup中的heigh:100%;在專案中我需要獲取大屏popup的高的具體的畫素值,然而我要說的是,總共有兩點:一、用純js獲取obj.style.height、obg.innerHeight和obj.offsetHeight獲取,    c

js獲取到display的屬性

今天偶然看到以前遺留的一個問題,現在用谷歌除錯了一下,明白了,特此記錄一下。 原問題+code: 為什麼我的點選事件第一次點選沒反應? <html> <head> <style type="text/css"> body{