Hi all,
I'm having an issue with AngularJS updating view elements following model
changes. I have a form with 2 fields, and I want the user to fill in 1 of
them, and have the other automatically filled (on ng-blur). The example I'm
posting uses person name and social security number (SSN). By filling in
the SSN the app carries out an HTTP call to fetch the name for that SSN,
and vice-versa.
Here's my Angular code:
define([
'angular'
], function (angular) {
angular.module('form.formDirective', [])
.directive('formDirective', formDirective);
formDirective.$inject = ["$rootScope", "$sce", "$document", "$translate",
"$filter", "$http"];
function formDirective($rootScope, $sce, $document, $translate, $filter,
$http) {
var myLink = function ($scope, $element, attrs) {
$scope.setFieldsForName = function(name) {
var url = 'http://some.rest.api/getSsn/' + name;
$http.get(url)
.success(function(data, status, headers, config) {
$scope.personSsn = data.SSN;
})
.error(function (data, status, headers, config) {
// no-op
});
};
$scope.setFieldsForSsn = function(ssn) {
var url = 'http://some.rest.api/getName/' + ssn;
$http.get(url)
.success(function(data, status, headers, config) {
$scope.personSsn = data.name;
})
.error(function (data, status, headers, config) {
// no-op
});
};
};
return {
templateUrl: 'form.directive.html',
restrict : 'EA',
scope : {
field : '=',
model : '=',
renameChildKey: "=",
preview : "=",
delete : '&',
ngDisabled : "=",
isEditData : "="
},
replace : true,
link : myLink
};
}
});
Here's the relevant HTML:
<!-- Name -->
<div class="form-group">
<input type="text"
id="{{getId(0)}}"
class="form-control"
placeholder="Name"
ng-model="personName"
ng-blur="setFieldsForName(personName);"/>
</div>
<!-- SSN -->
<div class="form-group">
<input type="text"
id="{{getId(1)}}"
class="form-control"
placeholder="SSN"
ng-model="personSsn"
ng-blur="setFieldsForSsn(personSsn);"/>
</div>
This works perfectly well for one case, e.g., fill in name and get SSN, or
the other way around. But any attempt after that first one, what happens is
the function is called, it fetches the correct data, updates the
appropriate scope variable, but the input field value does not reflect the
updated value of the variable. Any help would be greatly appreciated!
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
