Sou novo no AngularJS e, embora saiba que você deve carregar todos os seus dados por meio de uma API JSON em seu back-end, também tinha um projeto Rails existente que queria lançar no AngularJS apenas para facilitar (e impressionar) ligações de dados.
Mas a renderização do lado do servidor de todos os dados já estava em vigor e eu não queria mudar toda a minha arquitetura de back-end.
A maneira de contornar esse problema (que tenho certeza de que seria desaprovado, mas funciona) era acessar o escopo no DOM Ready e, em seguida, chamar uma função de controlador para adicionar dados com os dados renderizados do lado do servidor .
O código a seguir é o que eu adicionei à página em que @dataos dados são trazidos do lado do servidor.
<script type="text/javascript">
// Load all the data brought over from server-side
$(function() {
var _scope = angular.element($("#controllerDiv")).scope();
_scope.$apply(function(scope) {
<% @data.each do |item| %>
scope.addItem({
item_name: "<%= item.name %>",
weight: <%= item.weight %>
});
<% end %>
});
});
</script>Neste exemplo, o controlador que possui a função addItemestá anexado ao divcom o id #controllerDiv.