Функция обратного вызова в $ apply() в angularjs?

Question

Что я хочу сделать, это натолкнуть объект на массив, привязанный к html, привязанный к angularjs, а затем сделать функцию щелчка на новом созданном элементе. код как этот

$scope.fruits = {"orange", "plum", "cherry"}; 
$scope.add = function() { 
    $scope.fruits.push("apple"); 
    //this would add an element to the html, then I want to click on the element 
    $('#fruits').children.eq(-1).click();//click the last element (which has just been created) 
} 

HTML, это как:

<div id="fruits"> 
    <div ng-repeat="fruit in fruits"></div> 
</div> 

Проблема заключается в том, когда объект помещается в модель, угловатый бы сделать что-то вроде $ объема $ применяются(). для динамического обновления html. Если я нажимаю последний элемент с .children(). Eq (-1) .click(), он не будет ждать после создания нового элемента, то, что он на самом деле нажимает, является div «cherry». .

Я пытался позвонить $ объем $ применяется() до щелчка(), она работает, но я получил сообщение об ошибке:

$apply already in progress 

, который я считаю, это не очень хорошая практика, и $ применять () не следует вызывать таким образом.

Answer 1

Когда вы добавляете в область $ scope, вы находитесь внутри цикла дайджеста, и DOM не будет скомпилирован и обновлен до тех пор, пока эти циклы не будут завершены - в основном в вашем приложении $ scope вы меняете массив, но в этот момент рендеринг DOM все еще имеет предыдущие элементы. Как только он выйдет из цикла, наблюдатели от репитера будут стрелять и отображать новый элемент DOM, но вы уже покинули свой контроллер.

Решение действительно прост. Вам просто нужно поставить в очередь ваше обновление на тот момент, когда заканчивается текущий цикл дайджеста. Вы можете сделать это с помощью setTimeout без задержки. это поставит вашу функцию в очереди и вызвать его, когда текущая обработка выполняется:

setTimeout(function() { 
    $('#fruits').children().eq(-1).click(); 
}, 0); 

Вот рабочая скрипку: http://jsfiddle.net/jeremylikness/bWeQL/

(я настоятельно рекомендую вам рассмотреть писать директиву для этого, чтобы избежать манипулирование DOM непосредственно из вашего контроллера).