Длина элемента равна нулю, даже если он заполнен

Question

Я пытаюсь установить атрибуты данных с помощью angularjs / js.

<article id="desktop">
    <h3>Dein Desktop: </h3>
    <ul>
        <li class="deskElem" data-ng-repeat="x in storage | orderBy: '-name' " >
            {{x.name}}
        </li>
    </ul>
</article>

JS:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $http, $window, $timeout){

    //All Objects on Desktop
    $scope.storage = [];     

    //Show Desktop

    $http.get("/getDesktop").then(function(response){
        for(var i = 0; i<response.data.length; i++){
            $scope.storage[i] = {name: response.data[i]};
        }

        $scope.setLetter();
        return;
    });

    $scope.setLetter = function(){
        var elem = document.getElementsByClassName("deskElem");
        console.log(elem);

        for(var j=0; j< elem.length; j++){
            elem[j].setAttribute('data-letters', 
            $scope.storage[j].name.charAt(0));
        }
    }
});

И контроллер Java:

 //Returns Desktop
@GetMapping("/getDesktop")
public ArrayList<String> getDesktop() throws Exception {
    ArrayList<String> itemNames = new ArrayList<>();

    if(kdxF.getUser() != null) {
        itemNames = kdxF.showDesktop();        // Just returns an 
    ArrayList of strings
    }else {
        throw new Exception("Not logged in!");
    }

    return itemNames;
}

Длина элемента равна нулю, даже если мой console.log (elem) отображает элементы. Мэйб, это причина метода get, но это только предположение.

Answer 1

Никогда не используйте код поиска DOM в контроллерах. Причиной возникновения ошибки является вероятность того, что для первого создания этих элементов необходим цикл дайджеста

Вы можете установить этот атрибут прямо в представлении, используя {{x.name[0]}}

<li class="deskElem" data-letters="{{x.name[0]}}" data-ng-repeat="x in storage | orderBy: '-name' ">

Answer 2

Вы не делаете угловой путь.

Модели должны быть тесно связаны с узлами html-купола в представлении. Когда вы обновляете модели или виды, другой будет обновляться наоборот. Читайте о Angular 2way переплет Также в вашем случае, вы определили ng-app ? Код шаблона будет выглядеть следующим образом

<div ng-app="myApp" ng-controller="myCtrl">
<article id="desktop">
    <h3>Dein Desktop: </h3>
    <ul>
        <li class="deskElem" data-ng-repeat="x in storage | orderBy: '-name' ">
            {{x.name}}
        </li>
    </ul>
</article>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $http.get("/getDesktop").then(function(response) {
        for (var i = 0; i < response.data.length; i++) {
            $scope.storage[i] = {
                name: response.data[i]
            };
        }

        $scope.setLetter();
        return;
    });
});