$scope 变量未重新加载

Question

在控制器中我有以下代码：

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

太好了，我看到了客户的姓氏。

在控制器中我也有这段代码。当我点击超链接时调用此函数

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

我更改输入中的文本并单击超链接。调用了WEBAPI，reload函数返回的数据是正确的，但是视图没有更新。

我错过了什么？

Answer 1

value="{{customer.lastName}}" 只会第一次计算表达式，然后用 customer.lastName 值替换 1，DOM 如下所示

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

去掉了{{customer.lastName}}的值，作用域变量的变化永远不会发生在那个输入字段上。

您应该在那里使用 ng-model 以进行双向绑定，一旦您更新范围值，它将更新输入和范围值。

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

Demo Plunkr

$scope 变量未重新加载

$scope variable not reloaded

data-binding

asp.net-web-api

angularjs

angularjs-bindings