javascript - 将对象添加到 $scope 的 2 种方法，只有一种有效

Question

我有一个用户服务负责身份验证。

在我的html中:

<div ng-show="user.authenticated">Hi {{user.username}}!</div>

Controller 设置范围如下:

$scope.user = userService;

这很好用!如果我重新加载 html 页面，div 会隐藏一小段时间，直到已登录的用户通过身份验证。

但是如果我尝试在 Controller 中的 $scope 上设置用户对象，如下所示:

$scope.user = {
  username: userService.username,
  authenticated: userService.authenticated
};

如果我重新加载页面，那么它就不再工作了，div 永远不会显示，即使用户已经登录，就像上面的例子一样。这怎么行不通？

编辑:我将添加 Controller (或者至少添加 Controller 中有趣的部分):

angular.module('app.controllers')
  .controller('NavCtrl', ['$scope','$rootScope','$location','userService','alertService',
   function($scope,$rootScope,$location,userService,alertService) {
//    $scope.user = userService;  // This works (but is now commented out)

// The following does not work if the user reloads this page
// The view is only updated with username when (after a few milliseconds)
// userService has talked with the server and gotten the user-details...    
      $scope.user = {
          username: userService.username,
          authenticated: userService.authenticated
        };

   }]);

登录后重新加载 html 非常重要，否则 userService 将已经使用用户详细信息进行设置。因此，当设置 View 时(页面重新加载后)，userService 中没有可用的用户信息，这仅在重新加载后不久可用......

编辑 2: 我尝试第二种变体的原因是因为我有一个页面，其中的对象具有各种属性，而用户名只是所需的属性之一。在用户可能重新加载页面之前，这一切正常。

编辑3:我改变了2ooom的 fiddle 以使其更适合我的情况，请参阅http://jsfiddle.net/utphjuzy/1/

Answer 1

这与 Angular 的绑定(bind)机制如何工作(以及绑定(bind)的一般工作方式)有关。

当您执行诸如 $scope.user = userService; 之类的操作时，您实际上是将属性 user 绑定(bind)到 Object 用户服务。这意味着这两个属性将指向相同的内存中可变对象引用。如果该对象的属性发生变化，那么两个“指针”都会注意到该变化(在 $scope.user 的情况下，这将强制重新渲染)。

但是，如果你像这样使用它:

$scope.user = {
  username: userService.username,
  authenticated: userService.authenticated
};

您正在创建一个全新的用户对象，并且不是通过引用而是通过值分配其属性，因为 JavaScript 字符串、数字和 bool 值是不可变的，因此不能通过引用分配。最终，这意味着 Angular 将无法跟踪这些属性的更改。

实现您需要的一种方法是在保存需要绑定(bind)的任何数据的服务上使用模型对象。就像这个 Plunker 所示.