AngularJS视图没有't在将$http响应分配给$scope时进行更新

AngularJS view doesn't update when assigning a $http response to $scope

本文关键字：分配 响应 scope 更新 http AngularJS 在将 视图      更新时间：2023-09-26

我有一个用于多个值的ng-repeat循环。循环时，我从另一个值数组中获取一个变量，并使用它：

<div ng-repeat="i in [1,2,3]">
    <div ng-init="obj = getObject(i)">
        <pre>{{ obj }} </pre>
    </div>
</div>

我现在的目标是更改该变量的属性，并执行包含更新后的变量的POST请求。然后，服务器对此的响应包含所有值，我将这些值绑定到$scope以更新视图。

<a ng-click="change(obj, 5)">Set property to 5</a>
$scope.change = function(o, value) {
    o.prop = value;
    // save() sends a POST requests and returns a JSON with all values
    $scope.values = save(o);
}

这是有效的，但只是我第一次这样做。所有其他更改将反映在$scope.variables中，但不会反映在模板中的{{ obj }}变量中。$scope.$apply()也没有任何作用。

我创建了一个JS Fiddle来展示我的问题，它只模拟HTTP请求。然而，我发现，即使在REST后端运行此代码时，第一次一切都很好，但之后的每一次都没有任何变化。

我认为这个问题是因为您使用的是ng-init，它可能会设置一个不变的值，因为您正在调用一个函数。一旦您将{{ obj }}更改为{{ getObject(i) }}，它就会工作。唯一的问题是，您的变量也在脚本中被引用和修改allTwo和allThree，因为您直接分配它们。我通过克隆对象解决了这个问题，但当您使用AJAX时，这可能不会成为问题。以下是您的小提琴的更新版本：http://jsfiddle.net/0ps2d7Lp/6/

我已经对你的小提琴进行了更改。

<div ng-repeat="i in [1,2,3]">
   <div>
     <pre>{{ getObject(i) }} </pre>
   </div>
</div>

控制器更改：

$scope.changeType = function(ids, type) {
    angular.forEach($scope.objects, function(o) {
        if (ids.indexOf(o.id) > -1) {
            o.type = type;   
            var response = (type === 2) ? allTwo : allThree
            $scope.objects = angular.copy(response);
        }
    });
};

链接到您更新的小提琴在这里

在您的情况下，getObject()是必要的，但为了简单起见，我在回答中排除了它。我知道您需要执行PUT/POST请求来更新服务器端的对象，但我认为根本没有必要将视图重新绑定到服务器的响应。从根本上讲，在大多数情况下，PUT不需要200 OK以外的响应。关键是你告诉服务器更新对象，而不是创建它们。因此，主键不会更改，因此不需要重新绑定对象。更改已经存在于内存中。

HTML

<div class="example" ng-controller="MyCtrl">       
    <div ng-repeat="obj in objects">
        <div><pre>{{ obj }}</pre></div>
    </div>
    <a href="#" ng-click="changeType([1,2,3], 2)">Change all to Type 2</a>
    <a href="#" ng-click="changeType([1,2,3], 3)">Change all to Type 3</a>
</div>

JavaScript

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    // initial objects
    $scope.objects = [
        { id: 1, type: 1 },
        { id: 2, type: 2 },
        { id: 3, type: 3 }
    ];
    $scope.changeType = function(ids, type) {
        angular.forEach($scope.objects, function(o) {
            if (ids.indexOf(o.id) > -1) {
                o.type = type;
                // Perform your PUT/POST request here for each
                // updated object to update it on the server-side.
                // There is no need to bind to a server response.
            }
        });
    };    
}
相关文章：