angularjsasp.net-web-apidata-bindingangularjs-bindings

$scope variable not reloaded


In the controller I have the code below :

//View
<input type="text" value="{{customer.lastName}}" />

//Controller
$scope.getbycode = function (customerCode) {
    var deferred = $q.defer(),
        getCustomerRequest = {
            code: customerCode
        };

    $http({ method: 'POST', url: 'api/customer/getbycode', data: getCustomerRequest })
        .success(function (data) {
            deferred.resolve(data);
        }).error(function () {
            deferred.reject();
        });

    return deferred.promise;
};

$scope.getbycode($routeParams.customerCode).then(function (data) {
    $scope.customer = data.customer;
});

That's work, I see the lastname of Customer.

In the controller I have this code too. This function is called when I ckick on an hyperlink

$scope.reload = function (customerCode) {
    $scope.getbycode(customerCode).then(function (data) {
        $scope.customer = data.customer;
        alert($scope.customer.lastName);
    });
};

I change the text in the input and I click on the hyperlink. The WEBAPI is called, the data returned in the reload function is correct but the view is not updated.

I missed something ?


Solution

  • value="{{customer.lastName}}" will only evaluate expression first time & then it replaces with customer.lastName value which is 1, DOM will look like below

    <input type="text" value="1" />
    

    Which had got rid off {{customer.lastName}} value, the changes in scope variable will never happen to that input field.


    You should use ng-model there to have two way binding, that will update input & scope value once you update scope value.

    <input type="text" ng-model="customer.lastName" />
    

    Demo Plunkr