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

正如Park所说，您需要在控制器或提供程序中注入$ interval，但另外，您不应该使用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 2

由于错误提到$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 3

控制器'$ interval'参数中的某个地方必须使用你必须将$ interval传递给你的控制器 angular.module（'myCtrl'，function（$ scope，$ interval） < / p>

如何使用角度js重新加载/刷新元素

3 个答案: