Question

我有以下AngularJS控制器和服务模块。基本上我想要做的是在创建新客户后刷新custController.allCustomers，以便新客户在UI上显示。

但是，每当我致电custController.createCustomer时，allCustomers中的数据都不会有新客户。我怀疑我使用诺言的方式有问题。你能帮忙吗？

controlers.js

angular.module('CustomerModule')
.controller('CustomerController', function ($log, CustomerService) {
    console.log("CustomerController initializing");
    var custController = this;
    custController.newCustomer = {};

    custController.refresh = function () {
        CustomerService.getAllCustomers().success(function (response) {
            custController.allCustomers = response;
        });
        custController.newCustomer = {};
    };

    custController.createCustomer = function (customer) {
        CustomerService.createCustomer(customer).success(function (response) {
            custController.refresh();
        });
    };

    custController.refresh();
});

服务模块（services.js）

angular.module('CustomerModule')
.service('CustomerService', function ($http) {
    var service = this;

    service.getAllCustomers = function () {
        return $http.get("http://localhost:8080/customers");
    };

    service.createCustomer = function (customer) {
        console.log("Creating customer ", customer);
        return $http.post("http://localhost:8080/customers", customer);
    };
});

添加其余代码，以防他们提供帮助： app.js

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

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '../dashboard.html',
            controller: 'CustomerController',
            controllerAs: 'custController'
        })
        .when('/dashboard', {
            templateUrl: '../dashboard.html',
            controller: 'CustomerController',
            controllerAs: 'custController'
        })
        .otherwise({redirectTo: '/'});
}]);

的index.html

<!DOCTYPE html>
<html lang="en" ng-app='CustomerModule'>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#/dashboard">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#/dashboard">Dashboard</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div ng-view></div>
<script type="text/javascript" src="./app/app.js"></script>
<script type="text/javascript" src="./app/services.js"></script>
<script type="text/javascript" src="./app/controllers.js"></script>
</body>
</html>

dashboard.html

<div class="container">
    <div class="page-header"><h2>All Customers</h2></div>
    <table class="table table-striped">
        <thead>
        <td>Name</td>
        <td>Contact</td>
        <td>Address</td>
        <td>Email</td>
        <td>Action</td>
        </thead>
        <tr ng-repeat='customer in ::custController.allCustomers'>
            <td>{{::customer.name}}</td>
            <td>{{::customer.contact}}</td>
            <td>{{::customer.address}}</td>
            <td>{{::customer.email}}</td>
            <td>
                <a href='#/updateCustomer/{{customer.customerID}}'><span class="glyphicon glyphicon-edit"></span></a>
                <a ng-click='custController.deleteCustomer(customer)'><span class="glyphicon glyphicon-trash"></span></a>
            </td>
        </tr>
    </table>
</div>
<div class="container">
    <div class="page-header"><h2>Create a Customer</h2></div>

    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label" for="inputName">Name</label>

            <div class="controls">
                <input type="text" class="form-control" id="inputName" placeholder="Name"
                       ng-model="custController.newCustomer.name"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label" for="inputContact">Contact</label>

            <div class="controls">
                <input type="text" class="form-control" id="inputContact" placeholder="Contact"
                       ng-model="custController.newCustomer.contact"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label" for="inputAddress">Address</label>

            <div class="controls">
                <input type="text" class="form-control" id="inputAddress" placeholder="Address"
                       ng-model="custController.newCustomer.address"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label" for="inputEmail">Email</label>

            <div class="controls">
                <input type="text" class="form-control" id="inputEmail" placeholder="Email"
                       ng-model="custController.newCustomer.email"/>
            </div>
        </div>

        <a class="btn btn-primary" ng-click="custController.createCustomer(custController.newCustomer)">
            <span class="glyphicon glyphicon-plus"></span>
        </a>
    </form>
</div>

Answer 1

您在HTML中使用“一次性”绑定表达式。根据{{3}}：

以::开头的表达式被视为一次性表达式。一次性表达式将在稳定后停止重新计算，如果表达式结果为非未定义值，则会在第一次摘要后发生（请参阅下面的值稳定算法）。

这不是“单向”绑定，其中值仅在一个方向上更新。在值“stablized”（未定义）之后，这将停止更新视图。

AngularJS连续$ http调用没有返回正确的数据

1 个答案: