Menu
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>
748
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).
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
