Question

books.html

<div ng-controller="BookController">
        <table datatable="ng" class="row-border hover" ng-table="tableParams">
            <thead>
                <tr>
                    <th>BookID</th>
                    <th>BookName</th>
                    <th>Author</th>
                    <th>ISBNCode</th>
                    <th>NoOfBooks</th>
                    <th>PublishDate</th>
                    <th>NoOfBooksIssued</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="book in books">
                    <td>{{book.BookId}}</td>
                    <td>{{book.BookName}}</td>
                    <td>{{book.Author}}</td>
                    <td>{{book.ISBNCode}}</td>
                    <td>{{book.NoOfBooks}}</td>
                    <td>{{book.PublishDate}}</td>
                    <td>{{book.NoOfBooksIssued}}</td>
                    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit"><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button></p></td>
                </tr>
        </table>
    </div>

Bookcontroller.js

"use strict";
(function () {
    angular.module("Bookapp")
        .controller("BookController", ["$scope", "BookService",
        function ($scope, bookService) {
            bookService.getRequest()
                .then(function (response) {
                    $scope.books = JSON.parse(response);
                });
        }]);
})();



AddBookController.js

"use strict";
(function () {
    angular.module('Bookapp')
        .controller('AddBookController', ["$scope", "BookService",
        function ($scope, bookService) {
            $scope.save = function (item) {
                bookService.postRequest(item)
                    .then(function () {
                        location.path("books");
                });
            }
        }]);
})();

两个js文件都是2个不同的自定义文件，它们包含在母版页中。我也写过BookService.js。具体如下：

"use strict";
    (function () {
        angular.module("Bookapp")
            .factory("BookService", ["$http", "$q", function ($http, $q) {
                var baseURL = "http://localhost:27136/api/book";
                var getRequest = function (query) {
                    var deferred = $q.defer();
                    $http({
                        url: baseURL,
                        method: "GET"
                    })
                        .success(function (result) {
                            deferred.resolve(result);
                        })
                        .error(function (result, status) {
                            deferred.reject(status);
                        });
                    return deferred.promise;
                };
                var getByIdRequest = function (id) {
                    var deferred = $q.defer();
                    $http({
                        url: baseURL + "/" + id,
                        method: "GET"
                    })
                        .success(function (result) {
                            deferred.resolve(result);
                        })
                        .error(function (result, status) {
                            deferred.reject(status);
                        });
                    return deferred.promise;
                };
                var postRequest = function (data) {
                    var deferred = $q.defer();
                    $http({
                        url: baseURL,
                        method: "POST",
                        data: JSON.stringify(data)
                    })
                        .success(function (result) {
                            deferred.resolve(result);
                        })
                        .error(function (result, status) {
                            deferred.reject(status);
                        });
                    return deferred.promise;
                };
                var updateRequest = function (data, id) {
                    var deferred = $q.defer();
                    $http({
                        url: baseURL + "/" + id,
                        method: "PUT",
                        data: JSON.stringify(data)
                    })
                        .success(function (result) {
                            deferred.resolve(result);
                        })
                        .error(function (result, status) {
                            deferred.reject(status);
                        });
                    return deferred.promise;
                };
                var deleteRequest = function (id) {
                    var deferred = $q.defer();
                    $http({
                        url: baseURL + "/" + id,
                        method: "DELETE"
                    })
                        .success(function (result) {
                            deferred.resolve(result);
                        })
                        .error(function (result, status) {
                            deferred.reject(status);
                        });
                    return deferred.promise;
                };
                return {
                    getRequest: getRequest,
                    getByIdRequest: getByIdRequest,
                    postRequest: postRequest,
                    updateRequest: updateRequest,
                    deleteRequest: deleteRequest
                };
            }]);
    })()

我的问题是，当我点击表格下方的添加按钮时，我输入的图书的详细信息必须立即在表格中更新，这在我的情况下不会发生。我有2个不同的控制器，一个是BookController，它将使用服务方法从db获取所有书籍详细信息并显示在表中。另一个是AddBookController，它将新的书详细信息添加到表中。在AddBookController本身，我编写了代码，以便在将数据发布到db后获取数据。但我无法用新数据刷新表格。请帮助我。非常感谢你！

Answer 1

首先，您的服务中有代码味道，因为您不需要使用$ q服务从$ http检索承诺。

$ http总是返回一个承诺！

所以你可以简化所有这些功能：

var getRequest = function (query) {
    return $http({
        url: baseURL,
        method: "GET"
    });
};

对于你的问题

您是否尝试调试bookService.getRequest()请求？

尝试在您的图书管理器中放置一个console.log，看看它是否在添加后调用。

也许你需要在添加后触发get请求。

Answer 2

"use strict";
(function () {
    angular.module('Bookapp')
        .controller('AddBookController', ["$scope", "BookService",
        function ($scope, bookService) {
            $scope.save = function (item) {
                console.log(item);
                bookService.postRequest(item)
                    .then(function () {
                        bookService.getRequest()
                        .then(function (response) {
                            $scope.books = JSON.parse(response);
                        });
                });
            }
        }]);
})();

添加新数据后，Angular Js-Bootstrap表不会立即刷新

2 个答案: