2015-07-28 2 views
1

Я пытаюсь получить длину элемента span с помощью angular.element Однако я понимаю, что требуется время, чтобы выполнить угловое выполнение ng-repeat. И из-за этого я не получил нужное количество длин, чтобы вернуться.

Я хочу выполнить следующее: во-первых, отобразить номер нуля в зависимости от длины буквы. А затем произвольно сгенерируйте число от 0 до 9. В конечном счете замените номер правильной позицией букв.

HTML файл

<span class="nbr" ng-repeat="(key, value) in letters track by $index">0</span> 

JS файла

app.controller('MainCtrl', function($scope) { 
    $scope.letters = ["H", "E","L", "L","O"]; 
    $scope.randomnbr = angular.element(document.querySelectorAll('.nbr')); 
     alert($scope.randomnbr.length); 
}); 

Я сделал Plunker Plunker Link

Будет полезно, если кто-то может объяснить, как и когда угловая заряжено и почему это произошло. Спасибо вам заранее!

+0

чем смысл этого? вы берете массив, который имеет известную длину, а затем пытается найти его длину, узнав, сколько элементов было выписано? Это вообще не кажется угловатым, и даже если есть ответы, которые работают, это просто не имеет смысла. – Claies

+0

Это всего лишь фрагмент кода, который мне нужен, чтобы узнать, как работать с моим другим проектом. Предположим, что у вас есть строка, и вы хотите отображать букву индивидуально, и вы хотите управлять индивидуально, а также определенным образом. @Claies –

+0

у вас уже есть ответ о том, как сделать это не угловым способом, но я все же считаю, что это не самый эффективный способ работы в угловом режиме. Я думаю, что если вы разместили специфику своего конкретного кода, то в 99 раз из 100 существует способ сделать все, что вам нужно для достижения углового, не прибегая к JQuery или 'angular.element', и вы на самом деле не сделали этого что это один раз, когда это необходимо. – Claies

ответ

2

Первый - Не делать манипуляции DOM в контроллерах.

Это происходит из-за того, что ваш контроллер начинает инициализироваться первым, который запускает переменную scope ng-repeat.

Чтобы проверить это, переверните код в $ timeout - это позволит вам вызвать угловой элемент, вызываемый в следующий цикл дайджеста.

app.controller('MainCtrl', function($scope, $timeout) { 
    $scope.letters = ["H", "E", "L", "L", "O"]; 
    $timeout(function() { 
    $scope.randomnbr = angular.element(document.querySelectorAll('.nbr')); 
    alert($scope.randomnbr.length); 
    }); 
}); 

Лучший способ справиться является Calling a function when ng-repeat has finished

1

Проверьте демонстрационную версию: Plunker.

Добавить $timeout ждать $digest закончить:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) { 
    $scope.letters = ["H", "E","L", "L","O"]; 

    $timeout(function() { 
    $scope.randomnbr = angular.element(document.querySelectorAll('.nbr')); 
    alert($scope.randomnbr.length); 
    }); 

}]); 
Смежные вопросы