为什么我的工厂需要使用 angular.copy？

我试图让 Thing 工厂发出 HTTP 请求并能够在我的控制器中使用响应。

1. 在我的工厂我必须做angular.copy(data, arr)。简单地做arr = data不起作用。为什么是这样？angular.copy()只是a）删除所有内容arrb) 迭代data并将东西分配给arr。唯一的区别是arr = data就是它arr指着data而不是新的副本data。为什么这很重要？为什么不呢arr = data.slice(0)工作（据我所知，它与angular.copy)?

2. 实现我的目标的最佳方法是什么？ （正确使用工厂）

主要.html

<div class="container">

<div class="page-header">
  <h1>Test App</h1>
</div>

<ul>
  <li ng-repeat="thing in things">{{thing.name}}</li>
</ul>

</div>

主控制器.js

'use strict';

angular.module('testApp')
  .factory('Thing', function($http) {
    var arr = [];
    return {
      things: arr,
      get: function() {
        $http.get('/api/things').success(function(data) {
          angular.copy(data, arr); // this works
          // arr = data; but this doesn't
          // arr = data.slice(0); and neither does this

        });
      }
    };
  })
  .controller('MainCtrl', function ($scope, Thing) {
    Thing.get();
    $scope.things = Thing.things;
  });

你的问题与角度无关，而是与Javascript有关。

var arr = [] // arr is a pointer to an empty array
var things = arr  // things is a pointer to the same empty array
arr = data   // now arr points to data, but things still points to the empty array

您可以通过运行以下代码来说服自己：

var a = [1];
var b = a;
a = [2];
// Now if you console.log a and b, a === [2] and b === [1]

但是如果你操纵一个对象的属性

var a = { data: 1 }
var b = a;
a.data = 2;
// Now a.data and b.data are the same: 2
a = { data: 3 };
// Here we changed a, not its property, so a and b are not the same anymore
// a.data === 3 but b.data === 2

如果您了解这一点，那么有很多方法可以解决您的问题，例如：

angular.module('testApp')
  .factory('Thing', function($http) {
  var obj = {};
  return {
    things: obj,
    get: function() {
      $http.get('/api/things').success(function(data) {
        obj.data = data;
      });
    }
  };
})

在你的 HTML 使用中things.data.

或者，如果您不想使用对象属性，而是直接使用数组，而不是替换指针，您只需更新数组的内容（因此 arr 仍然指向同一个数组）：

angular.module('testApp')
  .factory('Thing', function($http) {
  var arr= [];
  return {
    things: arr,
    get: function() {
      $http.get('/api/things').success(function(data) {
        for (var i in data) {
          arr[i] = data[i];
        }
      });
    }
  };
})