在angularJS中獲取html元素

我是AngularJS世界中的新成員。我在這裏有一個情況。在angularJS中獲取html元素

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body ng-app="myApp"> 

<table ng-controller="myCtrl" border="1"> 
<tr class="x" ng-repeat="x in records"> 
    <td>{{x.Name}}</td> 
    <td>{{x.Country}}</td> 
</tr> 
</table> 

<script> 
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) { 
    $scope.records = [ 
    { 
     "Name" : "Alfreds Futterkiste", 
     "Country" : "Germany" 
    }, 
    { 
     "Name" : "Berglunds snabbköp", 
     "Country" : "Sweden" 
    }, 
    { 
     "Name" : "Centro comercial Moctezuma", 
     "Country" : "Mexico" 
    }, 
    { 
     "Name" : "Ernst Handel", 
     "Country" : "Austria" 
    } 
    ]; 
    var arrays = document.getElementsByClassName("x"); 
    console.log(arrays.length); 
}); 
</script>

我試圖（使用納克 - 重複）來獲取HTML元件陣列我沒有通過angularJS負載。當我記錄整個數組的值時，其結果是正確的。但是，當我登錄array.length或array [1]時，結果分別爲0和undefined。我試圖把這些代碼放在$ scope.on（'viewContentLoaded'）中，以確保所有html元素都完成加載，但結果是一樣的。那麼我的愚蠢在這裏呢？

謝謝。

****解決方案：

$timeout(function(){ 
var arrays = document.getElementsByClassName("x"); 
console.log(arrays.length); 
});

由於@Vladimir中號

來源

2016-09-18 Justin

爲什麼你不只是得到通過角數組：$ scope.records？ $ scope.records.length？ –

我只是想獲取html元素來操縱它們; array.length不是我的目的;我只是用它來測試。 :) – Justin

有一點要記住，角度是做某些事情的異步。意思是，當你在你的控制器中分配你的記錄時，角度將只在你的控制器方法完成後纔開始渲染。因此，您對文檔元素的請求將不會返回任何內容。

在某些情況下繞過它的一種方法是使用$ timeout服務。

$timeout(function(){ 
var arrays = document.getElementsByClassName("x"); 
    console.log(arrays.length); 
});

當角度摘要循環完成渲染時，應該執行超時內的方法。

來源

2016-09-18 16:31:04

它適合我。但我想更深入地瞭解更多。據我所知，$ timeout服務與setTimeOut函數類似，這意味着它將允許我們在延遲時間後執行一個函數。那麼角怎麼知道所有的視圖完成加載然後運行$超時服務？我想到了所有視圖都沒有完成加載的情況，所以我試圖把這些代碼放在$ scope.on（「viewContentLoaded」），angular.element（document）.ready和$（document） .ready（jQuery）確保在加載過程中完成所有事情，但它在這裏不起作用。感謝您的幫助！ – Justin

它與角度內的摘要循環有關。在您創建控制器的特定元素的渲染將在該控制器方法內創建的所有超時之前發生。然而，事情變得更加複雜，當模板將包含一些其他元素與自己的控制器，因爲那些將在給定的超時後很可能被處理。 –

哦，我明白了。非常感謝。 – Justin

您需要包裝內

angular.element(document).ready(function(){});

了這樣的代碼

angular.element(document).ready(function(){ 
var arrays = document.getElementsByClassName("x"); 
console.log(arrays[2]); 
});

你可以參考 Demo

另外我試着用日誌記錄整個數組或array.length的代碼，但它不工作。事實上，只有在DOM渲染之後，它纔會工作。所以上面的代碼將等待文檔準備就緒，一旦文檔被渲染，您可以訪問html元素。

來源

2016-09-18 16:22:20

嗯..它在plnkr上工作，但不是在我的本地和w3school工作嘗試。超級怪異。 – Justin

您可以嘗試更改angular.min.js腳本引用。其實我也在plnkr更新了這個。在我的情況下，它不適用於你在代碼中的引用。 –

Angular是一個MVC框架。 MVC代表「模型視圖控制器」，這意味着你的應用程序應該分爲3個部分：

視圖（HTML中的任何指示，例如NG-重複）。
控制器（您的app.controller，控制範圍和）
模型（角度，服務/工廠），存儲業務邏輯和功能。例如，在您的情況下，角廠可能會返回一個用戶（名稱，國家）數組，您的控制器將傳入$ scope，然後將其自動傳輸到您的視圖。

只是要指出，這些（視圖，控制器，模型）中的每一個按照慣例都在不同的文件中。

的角度另一個顯着特點，正如你可能已經知道了，是雙向綁定。這意味着視圖中的任何變化都會反映在模型和控制器中，並且反之亦然。這對你來說意味着你的ng-repeat將總是完全代表你在$ scope.records中擁有的東西。只是控制檯登錄這個。

角有時會以神祕的方式工作，並不意味着你使用選擇器。它從來沒有必要使用角度，這是一般角度的另一個優點。沒有選擇器！

來源

2016-09-18 16:22:31 nadavvadan

是的，我知道理論，但我只是覺得它與JavaScript和jQuery類似;當一切都完成加載，我們可以操縱DOM。哼。我只想更多地瞭解角度。謝謝yoi – Justin

@Justin是的，你可以操縱DOM。 MVC體系結構只是假設你不假設。查看關於AngularJS哲學與jQuery的不同之處的最佳答案 - http://stackoverflow.com/a/15012542/3091161 – enkryptor

您正試圖在呈現之前獲取li元素。 S0 @DashingDev說，你需要將你的代碼塊移動到angular.element(document).ready(function(){});。你的代碼應該是看

angular.element(document).ready(function(){ 
    var multibutton = document.getElementsByClassName("x"); 
    console.log(multibutton[0]); 
});

這裏是Working fiddle

來源

2016-09-18 16:35:16

在angularJS中獲取html元素

回答

相關問題