AngularJS 重新加载页面不起作用

Question

我需要在更新后刷新列表，我已经尝试了所有解决方案并且 none 对我有用，我是 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();
  });
 }
};

});

关于 post 的成功事件，我需要重新加载。数据库已更新，因此 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);
      }
    };
  }

}());

AngularJS 重新加载页面不起作用

AngularJS reload page does not work

reload

angularjs