3

Tenho a seguinte function em angular que consome um servico:

function GetDados($scope, $http) {
    $http.get('http://localhost/api/v1/index.php/dados').success(function(data){
        $scope.dados = data;
    });
}

preciso que o $scope.dados vá para a este lugar

<div ng-controller="GetDados">
    <script>
        var json = $scope.dados; 

Não funciona. Não sei se isso é permitido.

O que tenho em dados é um json com vários registros. O erro que me mostra é que não reconhece a variável $scope. Obrigado.

Solução!

function GetDados($scope, $http){
$http.get('http://localhost/api/v1/index.php/dados').
    success(function(data){
    //$scope.dados = data;

            var json = data; 

Meu objetivo era construir um grafico utilizando o retorno do serviço. Coloquei o script do grafico no mesmo da chamada do serviço e utilizei. O ng-bind que o colega citou ajudou também.

3
  • Podes colocar o código do teu controller? Pelo menos a parte onde você registra ele 16/05/2016 às 18:49
  • Aliais, por que você não trabalha com esse dado dentro do controller? 16/05/2016 às 18:50
  • o meu controller é a function GetDados.. não trabalho dentro do controller pq tá separado em arquivos.. o controller tá em um arquivo separado e o retorno dele é para gerar um gráfico que coloquei no arquivo html
    – novato
    16/05/2016 às 19:01

1 Resposta 1

1

Isso acontece por que para você passar o resultado de um controller do Angular para a view (html) você precisa fazer um bind. Isso é feito de 2 modos:

  • <p>{{ nomeDoScope }}</p>
  • <p ng-bind="nomeDoScope"></p>

Deste modo, supondo que você tenha um $scope assim $scope.nomeDoScope = 'Meu teste', o valor que seria exibido na tela seria apenas "Meu Teste", ou seja, no seu caso seria exibido o JSON.

Lembrando que não precisa estar dentro de uma tag p, ele pode estar em qualquer elemento, desde que siga aquela padrão.

No seu exemplo seria: {{dados}}

Quando usar um ou outro?

Há controvérsias e até especulações sobre a performance de usar {{}} ou usar a diretiva ngBind. De fato há uma diferença de performance (ngBind é melhor), porém muito mínima, ela irá ter algum impacto somente quando usada em grande escala, e eu digo GRANDE ESCALA MESMO! Na maioria dos casos não influenciam.

ngBind

Então, considerando um cenário onde você possua muitos bindings, especialmente dentro de um texto extenso, o ideal seria usar a diretiva ngBind. Imagine que você tenha um elemento p que gere um texto de 2mil linhas, ao usar o método {{}} o escopo de análise não está definido, por isso a validação irá percorrer todo o texto até encontrar o bind e assim aplicá-lo. Já ao usar o ngBind, o escopo está definido e abrange somente o pedaço de texto que deve ser atualizado, logo a performance é melhor.

Exemplo:

<p>Aqui inicia nosso texto de exemplo muito...
    [..muito texto..] 
    <span ng-bind="meuEscopo"></span> e aqui continua nosso texto extenso...
    [...muito texto...]
</p>

{{ }}

É usado na maioria dos casos. Por que? Simplicidade. Imagine ter que criar um elemento span só para colocar um pedaço de texto? Chato né? Pois é.. Por isso na maioria dos casos o uso de {{}} é preferencial, e como dito acima, a diferença de performance não é tão significativa.

Se você tiver um elemento de título que será usado somente para exibir o título, não custa nada usar o ngBind, exemplo: <h6 ng-bind="meuEscopo"></h6>.

Exemplo:

<p>Aqui temos um exemplo curto com {{meuEscopo}} e aqui ele finaliza</p>

Mas não há necessidade de fazer isso só para um único elemento.

Acho que assim fica mais claro para você entender.

6
  • pelo que entendi seria assim: <div ng-bind="dados"> <script> var json = {{dados}};
    – novato
    16/05/2016 às 19:04
  • Esquece a parte de <script>, não precisa disso =D 16/05/2016 às 19:08
  • sim..kkk... eu coloquei isso pq no html estou gerando um grafico usando o chart.js e a fonte de dados é um json retornado pelo serviço, consumido pelo angular
    – novato
    16/05/2016 às 19:11
  • Mas não há necessidade. O angular irá se encarregar de atribuir o valor do $scope quando ele for referenciado na página. =D Obs.: Editei minha resposta para complementar a explicação. 16/05/2016 às 19:13
  • muitissimo obrigado! aprendi mais um pouco de angular hoje!
    – novato
    16/05/2016 às 19:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .