Question

我在AngularJS中使用控制器如下（根据thinkster.io上的angularjs教程的第3章：http://www.thinkster.io/angularjs/S2MxGFCO0B/3-communicating-with-a-server-using-a-service-and-resource）

posts.js

app.controller('postCtrl', function ($scope, Post) {

  $scope.posts = Post.get();
  $scope.post = { url: 'http://', title: '' };

  $scope.submitPost = function () {
    ...
  };

  $scope.deletePost = function (postId) {
    Post.delete({ id: postId }, function () {
      delete $scope.posts[postId];
      console.log($scope.posts);
    });
  };

});

post.js

app.factory('Post', function ($resource) {
  return $resource('https://luminous-heat-3725.firebaseIO.com/posts/:id.json');
});

posts.html

<div ng-repeat="(postId,post) in posts">
  <a href="{{post.url}}">{{post.title}}</a>
  <a href="#" ng-click="deletePost(postId);">Delete</a>
</div>

它是一个简单的控制器 - 具有提交帖子的功能和删除帖子的功能。

我面临的问题是deletePost函数中的回调似乎不起作用。因此，行delete $scope.posts[postId]似乎最初起作用，而console.log($scope.posts)提供了正确的输出（删除了帖子）。

但是DOM没有得到更新（帖子仍然显示）。如果我在Chrome中查看AngularJS调试器中的范围，我删除的帖子仍然存在。我必须刷新才能看到DOM中的帖子删除。 $scope.$apply()似乎没有效果。

我花了很多时间并认为这与$ scope变量的范围有关。所以我来到以下解决方案：我将window.obj设置为等于$ scope，然后在deletePost函数中使用window.obj而不是scope。

像这样：

window.obj = $scope;
$scope.deletePost = function (postId) {
  Post.delete({ id: postId },function () {
    delete window.obj.posts[postId];
  });
};

现在有效。任何人都可以解释为什么我必须为此设置一个全局变量？我犯了某种错误吗？

由于

Answer 1

Post.delete正在删除服务器中的资源，但这与当前模型（$scope.posts）无关。如果您也想更新它，可以拨打$scope.posts.splice(postId, 1)。

Angularjs-在$ resource delete方法的回调中更新$ scope的问题（thinkster.io第3章）

1 个答案: