AngularJS consecutive $http calls not returning correct data

Question

I have the below AngularJS controller and service modules. Basically what I wanted to do is to refresh custController.allCustomers after creating a new customer so that the new customer is showing up on the UI.

However, whenever I call custController.createCustomer, the data in allCustomers never has the new customer. I suspect there is something wrong in the way I use promise. Could you please help?

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();
});

The Service module (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);
    };
});

Add the rest code in case they help: 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>

Not clear what you wanted to do with the property custController.newCustomer. Is it bound to the template? It's always an empty object. — Michel
– Michel, Commented Oct 4, 2015 at 12:37
are you sure that the new customer is actually saved on the server? otherwise your function would be returning the right data, but you wouldn't see the new customer because it isn't on the db. — Daniele Sassoli
– Daniele Sassoli, Commented Oct 4, 2015 at 13:14
@DenisBokor Yes, the new customer is always saved. It is populated into allCustomers when I refresh the page. but it is supposed to be populated automatically without me refreshing the page - or the function that I wanted to achieve. — Bon
– Bon, Commented Oct 4, 2015 at 13:16
@MichaelP.Bazos new customer is the model used in a form to create the customer, it's data is cleared after it is saved into server so the form resets. — Bon
– Bon, Commented Oct 4, 2015 at 13:19
Maybe it's because you're using the bind-once sintax? So after the rows are rendered angular will unbind custController.allCustomers and the rows won't change, at least that's what I've understood of bind-once. Correct me if I'm wrong. — Daniele Sassoli
– Daniele Sassoli, Commented Oct 4, 2015 at 15:24

Sunil D. · Accepted Answer · 2015-10-04 17:06:51Z

1

You are using the "one time" binding expressions in your HTML. Per the documentation:

An expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization algorithm below).

This is not "one way" binding where the value only updates in one direction. This is is going to stop updating the view after the value has "stablized" (is not undefined).

answered Oct 4, 2015 at 17:06

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS consecutive $http calls not returning correct data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related