Угловой вид JS не обновляется

Question

Я стараюсь начать с обещаний и угловыхJS.

My backend возвращает правильные значения, но мой html-вид не показывает мою таблицу с данными, возвращаемыми из backend.

Что здесь не так?

Вот мой HTML:

<div ng-app="clinang" ng-controller="pacientesCtrl"> 
    <a class='btn btnprimary' href='/getdadospac/?oper=S' >Button</a> 
    <table ng-table="tableParams" class="table" show-filter="true"> 
     <tr ng-repeat="paciente in $data"> 
      <td title="'Pront'" filter="{ name: 'text'}" sortable="'pront'"> 
       {{paciente.pront}}</td> 
      <td title="'Nome'" filter="{ age: 'number'}" sortable="'nome'"> 
       {{paciente.nome}}</td> 
     </tr> 
    </table> 
</div> 

Вот мои данные в формате JSON, возвращающиеся из внутреннего интерфейса:

{"draw":1,"recordsTotal":5303,"recordsFiltered":5303, 
"data":[{"DT_RowId":"4367","pront":"4367","nome":"XXXXXXXXX","endereco":"RUA TEODORO DA SILVA,294\/314","bairro":"VILA ISABEL","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"2567*0440","cpf":"","email":""}, 
{"DT_RowId":"21","pront":"21","nome":"YYYYYYYYY","endereco":"R ARAGUAIA","bairro":"PARQUE CHUNO","cidade":"DUQUE DE CAXIAS","estado":"RJ","telefone":"35637685","cpf":"02570293709","email":"jaceni@ig.com.br"}, 
{"DT_RowId":"23","pront":"23","nome":"ZZZZZZZZZZ","endereco":"rua 18 de outubro 241 101","bairro":"tijuca","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"","cpf":"","email":""}, 
{"DT_RowId":"24","pront":"24","nome":"AAAAAAAAAAA","endereco":"RUA MARIZ E BARROS 470 APTO 610","bairro":"TIJUCA","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"22646701","cpf":"53551192715","email":""}, 
{"DT_RowId":"27","pront":"27","nome":"AAAAAAAA GON\u00C7ALVES","endereco":"rua an\u00E1polis 251","bairro":"nova igua\u00E7u","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"3101-9648","cpf":"","email":""}, 
{"DT_RowId":"28","pront":"28","nome":"ASKLJALDJSLKADJ","endereco":"lucio de mendon\u00E7a 24 apt 501","bairro":"maracana","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"2568-9519","cpf":"04301072772","email":""}, 
{"DT_RowId":"30","pront":"30","nome":"SADFSADFASDFSD","endereco":"RUA GRAVATAI N 61 APTO 302","bairro":"ROCHA MIRANDA","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"32787747","cpf":"","email":""}, 
{"DT_RowId":"29","pront":"29","nome":"ANASADFSA DOS SANTOS","endereco":"saboia lima 12 apt 04","bairro":"tijuca","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"2204-1498","cpf":"48080152268","email":""}, 
{"DT_RowId":"31","pront":"31","nome":"JOAO SDAFSA SOUZA","endereco":"av dom helder camara 312 bl 05 apt 102","bairro":"benfica","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"","cpf":"075422437-64","email":""}, 
{"DT_RowId":"33","pront":"33","nome":"SKDJFSDAJFLASD","endereco":"fabio da luz 275 bl 04 apt 504","bairro":"meier","cidade":"RIO DE JANEIRO","estado":"RJ","telefone":"3979-0859","cpf":"","email":""}]} 

JS КОД:

var app = angular.module("clinang", ["ngTable", "ngResource"]); 
      (function() { 

       app.controller("pacientesCtrl", pacientesCtrl); 
       pacientesCtrl.$inject = ["NgTableParams", "$resource"]; 

       function pacientesCtrl(NgTableParams, $resource) { 
       // tip: to debug, open chrome dev tools and uncomment the following line 
       debugger; 

       var Api = $resource("/getdadospac/?oper=S"); 
       this.tableParams = new NgTableParams({}, { 
        getData: function(params) { 
        // ajax request to api 
        return Api.get(params.url()) 
         .$promise 
         .then(function(rows) { 
          params.total(rows.recordsTotal); // recal. page nav controls 
          return rows.data; 
        }); 
        } 
       }); 
       this.tableParams.reload(); 
       } 
      })(); 

Answer 1

У вас есть контроллер, вызов и все, но вам нужно привязать переменную контроллера к виду с помощью области

function pacientesCtrl(NgTableParams, $resource) { 
     vm = this; 
     vm.rows = [] 

     .. 
     .then(function(rows) { 
     vm.rows = rows.data; 
     } 

затем в вашем HTML:

<tr ng-repeat="paciente in pacientesCtrl.rows"> 

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

Я также рекомендую этот простой и весело провести курс: https://www.codeschool.com/courses/shaping-up-with-angular-js

Answer 2

Я считаю, что вам нужно использовать либо Синтаксис ControllerAs или использование $ scope.

ControllerAs: Поскольку вы устанавливаете tableParams на экземпляр контроллера, вы должны использовать синтаксис ControllerAs присвоить псевдоним контроллеру доступ свойство:

ng-controller="pacientesCtrl as ctrl", а также ng-table="ctrl.tableParams"

$ сфера

Если вместо этого вы хотели бы использовать $ объем, то вам нужно вводить $ объем в контроллер и установить tableParams свойство в $ рамки, что-то вроде:

var app = angular.module("clinang", ["ngTable", "ngResource"]); 
     (function() { 

      app.controller("pacientesCtrl", pacientesCtrl); 
      pacientesCtrl.$inject = ["NgTableParams", "$resource", "$scope"]; 

      function pacientesCtrl(NgTableParams, $resource, $scope) { 
      // tip: to debug, open chrome dev tools and uncomment the following line 
      debugger; 

      var Api = $resource("/getdadospac/?oper=S"); 
      $scope.tableParams = new NgTableParams({}, { 
       getData: function(params) { 
       // ajax request to api 
       return Api.get(params.url()) 
        .$promise 
        .then(function(rows) { 
         params.total(rows.recordsTotal); // recal. page nav controls 
         return rows.data; 
       }); 
       } 
      }); 
      $scope.tableParams.reload(); 
      } 
     })(); 

Обратите внимание, что мы устанавливаем tableParams свойство на $scope, а не на экземпляр контроллера. Ваш HTML должен оставаться прежним.

Лично я предпочитаю синтаксис ControllerAs, но оба должны работать