Question

在我的菜单控制器中，我有一个保存菜单的功能。 $ scope.menu变量保存表示我的菜单数据的对象。 saveMenu函数将Ajax调用发送到REST API端点，然后作为响应接收更新的菜单。问题是，当我将$ scope.menu分配给响应时，HTML模板中的所有数据绑定都会中断。突然所有的菜单数据都消失了。

控制器代码。

$scope.saveMenu = function() {
  var menu = $scope.createJsonMenuRequest();
  var method = "PUT";
  var url =  FoodUrls.foodAPI + "menus/" + menu.id;

  var req = {
    method: method,
    url: url,
    headers: {
      "Content-Type": "application/json"
    },
    data: angular.toJson(menu)
  };

  $http(req).success(function(data) {
    $scope.menu = $.extend(true, {}, data);
  });    
};

createJsonMenuRequest函数只是通过菜单并从API不喜欢的副本中删除一些属性。

为什么绑定到HTML模板会中断？

更新

在success函数中赋值语句之前，$ scope.menu看起来像这样。

{
   name: "My Menu",
   sections: [
      { $$hashKey: "object:17", id: 1, name: "blarg"}
   ]
}

之后它看起来像这样......

{
   name: "My Menu",
   sections: [
      { id: 1, name: "blarg-edited"}
   ]
}

当最初创建菜单时，它丢失了Angular放在那里的$$ hashKeys。不知道那是什么意思。

Answer 1

我不建议对角度$ scope的任何属性使用jQuery的扩展函数。 $ scope是一个复杂的对象，有很多指向特定属性的指针等。我建议使用angular.merge，因为它应该在不破坏范围的情况下更好地合并对象。

https://docs.angularjs.org/api/ng/function/angular.merge

Answer 2

我还没有发表评论，所以我只是把它放在这里。

你调试了多远？

我在更新前查看$ scope.menu，然后在成功方法之后再查看。

您的数据/模板是什么样的？

只是出于我自己的好奇心，为什么深度$ .extend？可能完全有效，我从未以这种方式使用它。

看到你的更新，$ hashkey不应成为一个问题，如果你不想要它，你可以使用angular.copy（数据）或简单地在你的ng-repeat中添加一个轨道：

data-ng-repeat="item in menuItems track by $index"

Angular $ scope变量在更新时中断

2 个答案: