Angular - 從剛剛加載的模板訪問DOM元素

我剛剛開始Angular上週，並且我正努力從剛剛加載的模板訪問DOM。這裏是發生了什麼 -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其獲取DOM加載以後使用ng-repeat訪問動態元素。請讓我知道如何解決這個問題。謝謝！

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

來源

2016-08-26 skos

這是你的代碼的實際副本嗎？如果是的話，你會在事件監聽器的末尾丟失一個右括號。 $ scope。$ on（'...'，function（）{...}）;除此之外，你的代碼剪裁對我沒有任何缺陷。 – PerfectPixel

對我也一樣。我認爲最好的情況是，你可以在你複製問題的地方創建一個小提琴。 –

@PerfectPixel沒有那不是我的實際代碼。我能夠加載模板並打印這個'console.debug（「模板加載」）' – skos

當DOM被更新之前觸發事件通常會出現此問題。

一個共同的解決辦法是包裝在$超時到DOM您的訪問：

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

沒有延遲$超時會讓角度完成消化週期，並試圖對其進行訪問之前更新DOM。

編輯： 這裏是你修改plunkr：http://plnkr.co/edit/TCTPZcAd2Lnrd6c4dMyx?p=preview

來源

2016-08-26 08:41:42 PerfectPixel

謝謝，但沒有奏效。 – skos

這是一個可怕的答案，你不應該依靠超時加載任何東西！ – cullimorer

加載和渲染是兩雙不同的鞋子。有時使用超時的需求在stackoverflow上被廣泛討論。 – PerfectPixel

-1

你能嘗試做一個範圍$應用你叫loadTopTemplate功能之後？

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

來源

2016-08-26 08:46:09 cullimorer

如果你閱讀了你的鏈接，你將會意識到這個範圍。如果你在角度上下文之外改變了任何東西，那麼手動使用$ apply。在這種情況下，在上下文之外沒有任何變化。 – PerfectPixel

你已經寫在功能上，它得到的ng-click調用$scope.template_url = 'templates/top.html'這樣就意味着你的網頁是可用的，當你點擊的事件就完成了。
所以你必須在函數之外聲明top.html。

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

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

或者如果你想在添加功能，然後調用函數首先然後調用$scope對象。

來源

2016-08-26 08:49:26

Angular - 從剛剛加載的模板訪問DOM元素

回答

相關問題