在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元素

回答

相关问题