AngularJS重新加载页面不起作用

Question

我需要在更新后刷新列表，我尝试了所有解决方案，但都没有为我工作，我是Angular的新手。

我的代码是：

的index.html

<div ng-controller="customersCrtl"> 
<div class="container"> 
<br/> 
<blockquote><h4>Registro de Ingreso</h4></blockquote> 
<br/> 
<div class="row"> 
    <div class="col-md-2">Limite de Pagina: 
     <select ng-model="entryLimit" class="form-control"> 
      <option>10</option> 
      <option>50</option> 
      <option>100</option> 
      <option>250</option> 
      <option>500</option> 
     </select> 
    </div> 
    <div class="col-md-3">Buscar Por: 
     <input type="text" ng-model="search" ng-change="filter()" placeholder="Carnet de Identidad" class="form-control" /> 
    </div> 
    <div class="col-md-4"> 
     <h5>Listados {{ filtered.length }} de {{ totalItems}} Clientes registrados</h5> 
    </div> 
</div> 
<br/> 
<div class="row"> 
    <div class="col-md-12" ng-show="filteredItems > 0"> 
     <table class="table table-striped table-bordered"> 
     <thead> 
     <th>ID Cliente&nbsp;</th> 
     <th>Nombre&nbsp;</th> 
     <th>eMail&nbsp;</th> 
     <th>Detalles&nbsp;</th> 
     <th>Marcar Ingreso&nbsp;</th> 
     </thead> 
     <tbody> 
      <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> 
       <td>{{data.id}}</td> 
       <td>{{data.name}}</td> 
       <td>{{data.email}}</td> 
       <td>{{data.extras}}</td> 
       <td><a ng-click="updateCliente(data.id)" class="pull-right"><i class="glyphicon glyphicon-ok-sign"></i></a></td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    <div class="col-md-12" ng-show="filteredItems == 0"> 
     <div class="col-md-12"> 
      <h4>No customers found</h4> 
     </div> 
    </div> 
    <div class="col-md-12" ng-show="filteredItems > 0">  
     <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div> 


    </div> 
</div> 

和我app.js

var app = angular.module('myApp', ['ui.bootstrap']); 

app.filter('startFrom', function() { 
return function(input, start) { 
    if(input) { 
     start = +start; //parse to int 
     return input.slice(start); 
    } 
    return []; 
} 
}); 
app.controller('customersCrtl', function ($scope, $http, $timeout) { 
$http.get('ajax/getCustomers.php').success(function(data){ 
    $scope.list = data; 
    $scope.currentPage = 1; //current page 
    $scope.entryLimit = 5; //max no of items to display in a page 
    $scope.filteredItems = $scope.list.length; //Initially for no filter 
    $scope.totalItems = $scope.list.length; 
}); 
$scope.setPage = function(pageNo) { 
    $scope.currentPage = pageNo; 
}; 
$scope.filter = function() { 
    $timeout(function() { 
     $scope.filteredItems = $scope.filtered.length; 
    }, 10); 
}; 
$scope.sort_by = function(predicate) { 
    $scope.predicate = predicate; 
    $scope.reverse = !$scope.reverse; 
}; 
$scope.reload = function() { 
    location.reload(); 
}; 
$scope.updateCliente = function (cliente) { 
if(confirm("Confirma el ingreso?")){ 
$http.post("ajax/updateCliente.php?idCliente="+cliente).success(function(data){ 
    reload(); 
    }); 
} 
}; 

}); 

在后的成功事件，我需要重新加载。数据库被更新，所以http.post的结果必须是成功的。

我也试过$window.location.reload();而不是location.reload();，它没有工作。

Answer 1

不要忘记你的重载函数在范围内，所以通过$ scope调用它。

更换

reload(); 

通过

$scope.reload(); 

Answer 2

而是重新加载页面，获取数据再次

注：我使用then不success，因为后者已经过时，因此请观察数据访问方式的差异）

(function() { 
    "use strict"; 

    app.controller({CustomersController}); 

    CustomersController.$inject = ['$scope', '$http', '$timeout']; 
    function CustomersController($scope, $http, $timeout) { 

    getData(); // defined below 

    function getData() { 
     $http.get('ajax/getCustomers.php').then(function (response) { 
     $scope.list = response.data; 
     $scope.currentPage = 1; //current page 
     $scope.entryLimit = 5; //max no of items to display in a page 
     $scope.filteredItems = $scope.list.length; //Initially for no filter 
     $scope.totalItems = $scope.list.length; 
     }); 
    } 

    $scope.updateCliente = function (cliente) { 
     if(confirm("Confirma el ingreso?")) { 
     // Below, we pass `getData` as the function that will be called when the 
     // http request completes successfully. This will refresh the data on `$scope` 
     $http.post("ajax/updateCliente.php?idCliente=" + cliente).then(getData); 
     } 
    }; 
    } 

}());