Question

我上周刚刚开始使用Angular，我正在努力从刚刚加载的模板中访问DOM。这是最新发生的事情 -

的index.html

<div class="template" ng-app="myApp" ng-controller="myController">
    <div ng-include="template_url"></div>
    <input type="button" value="Load Top" ng-click="loadTopTemplate()">
</div>

模板 / 的top.html

<ul>
  <li ng-repeat="(key, myObjectItem) in myObject">
    <span id="{{key}}">{{myObjectItem | uppercase}}</span>
  </li>
</ul>
<span id="staticElement">Static Element</span>

app.js

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.myObject = {"item1": "one", "item2": "two", "item3": "three", "item4": "four", "item5": "five"};
  $scope.loadTopTemplate = function() {
    $scope.template_url = 'top.html';
  }

  $scope.$on('$includeContentLoaded', function() {
    console.debug("template loaded");
    console.debug("Static element text: " + document.getElementById("staticElement").innerHTML); //works
    console.debug("Dynamic element text: " + document.getElementById("item5").innerHTML); //doesn't work
  });
});

我无法访问 top.html 中的动态元素，后来使用ng-repeat将其加载到DOM中。请让我知道如何解决这个问题。谢谢！

Plunker - http://plnkr.co/edit/rRRRkJ20bm00yqslMtnS?p=preview

Answer 1

通常在更新DOM之前触发事件时会出现此问题。

一个常见的解决方案是在$ timeout中包装对DOM的访问：

$timeout(function() {
    console.debug($("#myDiv"));
});

$ timeout没有延迟会让角度完成摘要周期并在尝试访问之前更新DOM。

修改这是你修改过的plunkr：http://plnkr.co/edit/TCTPZcAd2Lnrd6c4dMyx?p=preview

Answer 2

您已在函数中编写了$scope.template_url = 'templates/top.html'，可以通过ng-click进行调用，这意味着当您的点击事件完成后，您的页面就可用了。
所以你必须在函数之外声明top.html。

$scope.template_url = 'templates/top.html';

<div class="template">
   <div ng-include="template_url"></div>
</div>

OR 如果要添加函数，请先调用函数，然后调用$scope对象。

Answer 3

你可以尝试做一个范围。$ apply你调用了loadTopTemplate函数吗？

https://www.sitepoint.com/understanding-angulars-apply-digest/

Angular - 从刚加载的模板访问DOM元素

3 个答案: