Как перезагрузить/обновить элемент с угловыми js

Question

Я новичок в Angular JS и изучаю его. У меня есть div, и я хочу загружать данные при запуске с помощью контроллера, но я хочу перезагрузить его снова, когда данные имеют новую запись.

index.html

<div id="third-content" ng-controller="IndexCtrl"> 
    <table id="table-class-detail" class="table table-atd table-responsive" ng-init="reloadElement('page001')"> 
    <tbody><tr><td>Loading...</td></tr></tbody> 
    </table> 
</div> 

Angularjs Модуль:

var app = angular.module('app',['ngRoute','controller']) 

.config(function($routeProvider){ 
    $routeProvider 
    .when('/home',{ 
     controller: 'AtdCtrl' 
    }) 
    .otherwise({ 
     //templateUrl: 'temp/404.html' 
    }) 
}) 

Контроллер:

angular.module('controller',[]) 

.controller('IndexCtrl', ['$scope', '$http', '$log', function($scope, $http, $log) { 

    $scope.getCurrentClass = function($params){ 
     $interval(function(){ 
      $http.post('./reloadpage.php',{'temp':$params}) 
      .success(function(data){ 
       $("#table-class-detail tbody").html("<tr><td>Name:</td><td>"+data.name+"</td></tr> <tr><td>Code:</td><td>"+data.code+"</td></tr>"); 
      }) 
      .error(function(error){ 
       $log.error(error); 
      }) 
     },1000); 
    } 
}]) 

reloadpage.php

$data = json_decode(file_get_contents("php://input")); 
$temp = $data->temp; 
$records = array(); 
$result = $this->currentClass($temp); 
if(!empty($result)){ 
    $records = array('name' => $result->name,'code' => $result->code); 
}else $records = null; 
echo json_encode($records); 

Я следую учебник форме это site это не работает, я получил сообщение об ошибке ReferenceError: $interval is not defined

Может кто-нибудь мне помочь? Как перезагрузить/обновить элемент на table-class-detail tbody

Answer 1

Так как упомянутая ошибка $interval is not defined, это означает, что вы забыли ввести $interval в свой контроллер/услугу. Что-то вроде этого:

angular 
    .module('controller',[]) 
    .controller('IndexCtrl', [ 
    '$scope', '$http', '$log', '$interval', // inject $interval here... 
    function($scope, $http, $log, $interval) { // and here... 

     $scope.getCurrentClass = function($params) { 
     $interval(function() { // ... so that you can use it here 
      $http 
      .post('./reloadpage.php',{ 
       'temp': $params 
      }) 
      .success(function(data) { 
       $("#table-class-detail tbody").html("<tr><td>Name:</td><td>"+data.name+"</td></tr> <tr><td>Code:</td><td>"+data.code+"</td></tr>"); 
      }) 
      .error(function(error){ 
       $log.error(error); 
      }) 
      }, 1000); 
     } 
     }]) 

PS: Когда вы закончите учебник, посетить John Papa's style guide передовой практики по AngularJS :)

Answer 2

Как сказал Парк, вам нужно впрыснуть $ интервал в контроллере или провайдер, но, кроме того, вы не должны использовать jQuery для управления DOM.

Вы должны скорее положить что-то подобное в вашем HTML:

<tbody ng-if="loading"> 
    <tr> 
     <td>Loading...</td> 
    </tr> 
</tbody> 
<tbody ng-if="!loading"> 
    <tr> 
     <td>{{ name }}</td> 
    </tr> 
    <tr> 
     <td>{{ code }}</td> 
    </tr> 
</tbody> 

И что-то вроде этого в контроллере:

$scope.loading = true; 
$scope.name = null; 
$scope.code = null; 

$scope.getCurrentClass = function($params){ 
    $http.post('./reloadpage.php', {'temp': $params}) 
    .success(function(data){ 
     $scope.name = data.name; 
     $scope.code = data.code; 
     $scope.loading = false; 
    }) 
    .error(function(error){ 
     $log.error(error); 
    }); 
} 

Answer 3

Где-то в контроллере «$ интервального» параметр должен использоваться для который вам нужно передать через интервал в ваш контроллер angular.module ('myCtrl', function ($ scope, $ interval)