Question

我有这个对象数组：

$scope.posts = [
    { 
        "name" : "name1",
        "age" : 12
    },
    { 
        "name" : "name1",
        "age" : 13
    },
    { 
        "name" : "name1",
        "age" : 14
    }
]

我在我的标记中重复这个数组，如下所示：

<div ng-repeat="post in posts">
    <span>{{post.name}}</span>
    <button ng-click="editPost(post)">Click!</button> <!-- passing post as argument here-->
</div>

控制器：

app.controller('PostController', function($scope, postFactory){
    //array is present in controller, just not showing it here
    $scope.editPost = function(post) {
        postFactory.editPost(post).then(function(data) { //factory having an ajax call which gets new data to be assigned to 'post'
            post = angular.copy(data.data)
            console.log(post); //here new data is populated successfully
        })
    }
})

正如您所看到的，何时编辑＆＃39;如果被调用，新的帖子数据将通过工厂从API中提取并分配到＆＃39; post＆＃39;（这是＆＃39; editPost＆＃39;函数的参数）。当我登录日志＆＃39;发布＆＃39;在为其分配新数据后，它会在控制台中显示新数据。但是，在我的标记中，仍会显示旧数据。知道为什么标记没有更新？这是我的工厂：

app.factory('postFactory', function($http) {
    return {
        editPost : editPost
    }

    function editPost(post) {
        return $http.post('<api>', post).success(function(response) {
            return response.data;
        })
    }
})

修改

我刚注意到了一些事情。当我改变时：

post = angular.copy(data.data)

到

post.name = data.data.name;

帖子得到更新。所以，我猜测对象的质量分配没有得到更新，但是当我更新单个属性时，它会在模板中更新。

Answer 1

简短回答：引用“按值传递”到函数。

答案很长：

当您将对象传递给函数时，该函数将收到该对象的引用的副本。当您覆盖该引用时，结果将仅在该函数的范围内可见。

换句话说，当你在做的时候：

post = angular.copy(data.data)

您只是更改了post（editPost}内部指向的内容。这对外界/范围没有影响（当我说范围时，我指的是正常的JS函数范围，而不是Angular的范围）。

使代码正常工作的一种可能方法是将$index值传递给editPost，然后像这样修改$scope.posts：

$scope.editPost = function(index) {
        postFactory.editPost($scope.posts[index]).then(function(data) { 
            $scope.posts[index]= angular.copy(data.data)
        })
    }

编辑：

由于我的解释不够清楚，我会试着详细说明。

想象一下，你在内存中有一个对象。我们称这个对象为objInMem。 vars引用了此对象。本质上，var就像一个箭头，指向记忆中的某个地方，即我们对象所在的地方。

someVar -> objInMem

当然，该引用的值（对象的“地址”）也在内存中，可以通过将其分配给其他vars来复制。

var otherVar = someVar; // someVar -> objInMem <- otherVar

当你调用一个接受一个对象的函数时，JS会复制你传递的引用的值，并将该副本“赋予”该函数。

function f(obj) {...}
f(someVar); // someVar -> objInMem <- obj (inside function f)

当你尝试将其他内容分配给obj（在f内）时，它只是改变了该引用的值，但原始引用将保持不变：

obj = someOtherThing; // obj -> someOtherThingInMem

// someVar -> objInMem (still the same)

我希望这可以解决问题。它有点过于简单，不包括简单值（如数字），但它应该解释这种特定情况。

Answer 2

很可能angular不知道异步更新。

尝试将其包装在超时中，如下所示：

$timeout(function(){
  post = angular.copy(data.data)
});

AngularJS：ajax调用

2 个答案: