Javascript 获取angularJS中的html元素_Javascript_Angularjs_Javascript Objects

Javascript 获取angularJS中的html元素

javascript angularjs

Javascript 获取angularJS中的html元素,javascript,angularjs,javascript-objects,Javascript,Angularjs,Javascript Objects,我是新来安格拉斯的。我这里有个情况 <!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"

我是新来安格拉斯的。我这里有个情况

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

多亏了@Vladimir M

，您需要将代码包装在里面

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

像这样

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

你可以参考

我还尝试了记录整个array或array.length的代码，但它不起作用。实际上，在DOM被渲染之前，它不会工作。

因此，上面的代码将等待文档准备就绪，一旦呈现文档，您就可以访问html元素。

Angular是一个MVC框架。 MVC代表“模型视图控制器”，这意味着您的应用程序应分为三个部分：

视图（html中的任何指令，例如ng repeat）

控制器（你的app.controller，控制范围和范围）

存储业务逻辑和功能的模型（在角度、服务/工厂中）。例如，在您的示例中，angular factory可能会返回一个用户数组（名称、国家/地区），控制器会将其传递到$scope中，然后自动将其传输到视图中

需要指出的是，根据惯例，这些（视图、控制器、模型）中的每一个都放在不同的文件中

您可能已经知道，angular的另一个显著特征是双向绑定。这意味着视图中的任何更改都会反映在模型和控制器中，反之亦然。这对您意味着，您的ng repeat将始终准确地表示您在$scope.records中拥有的内容。只要把这个记录下来

angular有时以一种神秘的方式工作，不适合您在其上使用选择器。从来没有必要使用angular，这是angular的另一个优点。没有选择器

需要记住的一点是，angular正在异步地做某些事情。这意味着，当您在控制器中分配记录时，angular将仅在控制器方法完成后才开始渲染。因此，您对文档元素的请求将不会返回任何内容

在某些情况下，一种解决方法是使用$timeout服务

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

当角度摘要循环完成渲染时，应执行超时内的方法。

您正在尝试在渲染前获取

li

元素。S0 正如@DashingDev所说，您需要将代码块移动到

angular.element（document.ready）（function（）{}）。您的代码应该是
angular.element(document).ready(function(){
  var multibutton = document.getElementsByClassName("x");
    console.log(multibutton[0]);
}); 

这里是嗯。。它在plnkr上有效，但在我的本地和学校试用中不起作用。超级怪异。您可以尝试更改angular.min.js脚本引用。事实上，我在plnkr中也更新了。在我的例子中，它不使用代码中的引用。为什么不直接通过$scope.records获取数组呢$scope.records.length？我只是想让html元素来操作它们；长度不是我的目的；我只是用它来测试。：）是的，我知道这个理论，但我只是认为它与javascript和jQuery相似；加载完所有内容后，我们可以操作DOM。嗯，我只是想了解更多关于角度的知识。感谢yoi@Justin是的，您可以操纵DOM。MVC架构只是假设您不需要这样做。检查一下这个关于AngularJS哲学与jQuery哲学有何不同的伟大答案——它对我有用。但我想再深入一点了解更多。正如我所知，$timeout服务与setTimeOut函数类似，这意味着它将允许我们在延迟时间之后执行函数。那么，angular如何知道所有视图都已加载完毕，然后运行$timeout服务呢？我想到了所有视图还没有完成加载的情况，所以我尝试将这些代码放在$scope.on（“viewContentLoaded”）、angular.element（document.ready）和$（document.ready（jQuery）中，以确保加载的所有操作都完成了，但它在这里不起作用。谢谢你帮助我！它与角度范围内的消化循环有关。要为其创建控制器的特定元素的呈现将在该控制器方法中创建的所有超时之前发生。然而，事情变得更加复杂，当模板将包含一些其他元素和自己的控制器时，因为这些元素很可能会在指定的超时时间安排后被处理。哦，我明白了。非常感谢。再次你好。我有个问题。如果我只想通过AngularJs获取这些html元素（不使用任何javascript或jquery选择器），那么有什么方法可以实现它呢？非常感谢。如果我太麻烦你了，就忽略这个问题。我只是想了解更多关于AngularJS的事情。很抱歉，我没有做太多，因为本机或jQueryAPI对我来说已经足够了。您将能够通过以下内容从当前范围的元素引用中获取：，但是，对于没有自己范围的元素，则不能。就我个人而言，我认为没有什么理由不使用jQuery或document.getElement。。。。应用程序编程接口。
angular.element(document).ready(function(){
  var multibutton = document.getElementsByClassName("x");
    console.log(multibutton[0]);
});