Javascript 在Angularjs中，在路由更改后如何查看DOM？

在我的应用程序中，我使用

ng view

切换我的视图。我需要操纵元素，例如更改宽度和位置。当我尝试在控制器上执行此操作时，正如预期的那样，

无法获取未定义或空引用的属性“setAttribute”

我知道这是因为JS不知道DOM已经改变了

因为我在Windows8中运行了一些大量的插件来使用SQLite，所以我不能发布太多的代码

这是正在加载到

ng视图中的我的模板

<div id="productslist" class="container">

    <div class="product" ng-repeat="product in products">
        <div class="details">
            <img src="img/detail-list-back.png" class="texture" />
            <div class="heading">
                <p class="title">{{product.name}}</p>
                <img src="img/products/title-shadow.png" class="title-shadow"/>
            </div>
            <div class="text">
                <div class="text-container">
                    <p class="intro" ng-hide="product.intro == null">{{product.intro}}</p>
                    <p class="title">Curves</p>
                    {{product.prodText}}
                </div>
            </div>
        </div>

        <div class="image" style="background-image:url('img/products/nanoslim-bkg.jpg')"></div>
    </div>

</div>

{{product.name}
{{product.intro}
曲线

{{product.prodText}

我的一些小朋友。for循环正在中断，因为它不知道节的存在：

var totalProd = res.rows.length;
var windowW = window.innerWidth;
var sections = document.querySelectorAll('#productslist .product');
var textArea = document.querySelectorAll('#productslist .text');
document.getElementById('productslist').setAttribute('style', 'width:' + (windowW * totalProd) + 'px');
for (var i = 0; i < sections.length; i++) {
    sections[i].setAttribute('style', 'width:' + windowW + 'px');
}

var totalProd=res.rows.length；
var windowW=window.innerWidth；
var sections=document.querySelectorAll（“#productslist.product”）；
var textArea=document.querySelectorAll（'#productslist.text'）；
document.getElementById（'productslist'）.setAttribute（'style'，'width:'+（windowW*totalProd）+'px'）；
对于（变量i=0；i

---

其他一切都很好。我试图通过使用ng样式来绕过这一点，但存在问题。

假设每个不同的视图都有不同的控制器，则很可能您的DOM加载时间比控制器长，从而导致问题

无法获取未定义或空引用的属性“setAttribute”。

您可以将DOM选择器语句放入$timeout语句中，延迟为1或2秒，这将给DOM足够的时间来加载并防止任何此类空引用问题。大概是这样的：

    myapp.controller("mycontroller"), function($scope, $timeout) {

        $timeout(function() {
            $("your-dom-selector").setAttribute("height", 500px);
        }, 2000);

    });

另一种更好的方法是使用广播模型，在该模型中，您可以跟踪路由更改事件，一旦路由更改事件成功，您就可以广播一个事件，并提供必要的详细信息，该事件可由相应的控制器捕获。

前一种方法易于使用，后一种方法是标准的，并保证无错误

---

更多关于$timeout的详细信息，在angular中，DOM操作应该尽可能在指令中完成。下面是将宽度设置为窗口宽度的示例：

.directive('fullWidth', function() {

  function link(scope, element, attrs) {
     var windowW = window.innerWidth;
     element.css({width: windowW + 'px'});
  }

  return {
    link: link
  };
});

现在在你看来

<div class="product" full-width ng-repeat="product in products">

最好使用$RouterProvider在不同的屏幕之间进行路由。如果只是用于面板或控件，最好使用ng If。通过这种方式，javascript将足以正确找到DOM。最好用一点代码来说明你的实际问题。你能在plnkr中输入一些代码吗。co@Venu-我使用的是

$routeProvider

。基本上，在加载新模板后，我将运行控制器，使用控制器

$scope

和

ng repeat

设置部分标题等内容。我需要根据屏幕大小设置分区的宽度，但是JS在dom中看不到它们。我已经添加了一些代码不要在控制器中进行dom操作。这是使用指令的情况。您不需要检查您所在的页面，因为页面本身知道该做什么！：）考虑到我需要在多个视图上使用类似的东西，似乎这将允许我这样做。只要指令加载到控制器所在的模块中，任何使用该控制器的视图都可以使用它！是的，应用程序结构相当简单。angular正在处理的所有内容都在同一个模块和视图中。

function link（）

do做什么？它用于指令函数

return{link:link}底部的return对象中两件事-1。对DOM操作使用指令。2.在使用JQuery之前，一定要从角度考虑问题！对于那些有JQuery背景的人来说，这是一个很好的指南：同意并接受。然而，这只是为了防止他不继续学习指令的曲线。我知道与指令相关的答案会弹出，这只是为了以防万一，如果他想要一个快速的解决方案。啊，这是有道理的。好吧，现在他有两种解决方案。我更喜欢正确的解决方案，而不是快速解决方案，以避免以后出现维护问题。