为什么我需要在我厂使用angular.copy？ [英] Why do I need to use angular.copy in my factory?

问题描述

我想有用品厂做一个HTTP请求，并能够使用我的控制器的响应。

1. 在我厂我必须做的 angular.copy（数据，ARR）。简单地做改编=数据不起作用。为什么是这样？ angular.copy（）只是一个），删除一切从改编和b）通过遍历数据并分配东西<​​code>改编。这之间唯一的区别和 ARR =数据是改编点数据，而不是数据的新副本。为什么会产生这个问题？而为什么不 ARR = data.slice（0）工作（从​​我个人理解，这是pretty大致相同角。复印件）？




2. 什么是实现我的目标的最佳途径？ （正常使用工厂）

main.html中

 ＆LT; D​​IV CLASS =容器＆GT;＆LT; D​​IV CLASS =页面页眉＆GT;
  ＆LT; H1＆GT;测试应用程序＆LT; / H1＆GT;
＆LT; / DIV＆GT;＆LT; UL＆GT;
  ＆LT;李NG重复=的东西的事＆GT; {{thing.name}}＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT; / DIV＆GT;
 

main.controller.js

 使用严格的;angular.module（'testApp'）
  .factory（东西，函数（$ HTTP）{
    VAR ARR = [];
    返回{
      东西：ARR，
      得到：函数（）{
        $ http.get（'/ API /事物）。成功（功能（数据）{
          angular.copy（数据，ARR）; //这个工程
          // ARR =数据;但是，这并不
          // ARR = data.slice（0）;而且也没有这个        }）;
      }
    };
  }）
  .controller（'MainCtrl'，函数（$范围，东西）{
    ：拿起（）;
    $ scope.things = Thing.things;
  }）;
 

解决方案

您的问题是不相关的角度，而是为JavaScript。

  VAR ARR = [] // ARR是指向一个空数组
VAR的事情= ARR //事情是指向同一个空数组
ARR =数据//现在ARR点的数据，但事情仍然指向空数组
 

您可以通过运行以下code说服自己的是：

  VAR A = [1];
变种B = A;
一个= [2];
//现在如果你CONSOLE.LOG a和b，一=== [2]和b === [1]
 

然而，如果你操纵的对象的属性

  VAR一个= {数据：1}
变种B = A;
A.数据= 2;
//现在A.数据和b.data是相同的：2
A = {数据：3};
//在这里，我们改变了，而不是它的属性，因此，a和b是不一样的再
// A.数据=== 3，但b.data === 2
 

如果你明白，有很多方法可以解决您的问题，如：

  angular.module（'testApp'）
  .factory（东西，函数（$ HTTP）{
  变种物镜= {};
  返回{
    东西：OBJ，
    得到：函数（）{
      $ http.get（'/ API /事物）。成功（功能（数据）{
        obj.data =数据;
      }）;
    }
  };
}）
 

和HTML中使用 things.data 。

或者，如果你不希望使用而不是替换您只需更新数组的内容（所以ARR仍然指向同一个数组）的指针的对象属性，而是直接数组，：

  angular.module（'testApp'）
  .factory（东西，函数（$ HTTP）{
  VAR ARR = [];
  返回{
    东西：ARR，
    得到：函数（）{
      $ http.get（'/ API /事物）。成功（功能（数据）{
        对于（数据变种I）{
          改编[I] =数据[I]
        }
      }）;
    }
  };
}）
 

I'm trying to have the Thing factory make an HTTP request and be able to use the response in my controller.

1. In my factory I have to do angular.copy(data, arr). Simply doing arr = data doesn't work. Why is this? angular.copy() just a) deletes everything from arr and b) iterates through data and assigns stuff to arr. The only difference between that and arr = data is that arr points to data rather than a new copy of data. Why would this matter? And why doesn't arr = data.slice(0) work (from what I understand, it's pretty much the same as angular.copy)?

2. What is the best way to accomplish my goal? (use the factory properly)

main.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>

main.controller.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;
  });

解决方案

Your problem is not related to angular, but to 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

You can convince yourself of that by running the following code:

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

However if you manipulate the property of an object

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

If you understand that, there are many ways to solve your issue, such as:

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

And in your HTML use things.data.

Or if you don't want to use an object property, but directly the array, instead of replacing the pointer you need to only update the content of the array (so arr still points to that same array):

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];
        }
      });
    }
  };
})

这篇关于为什么我需要在我厂使用angular.copy？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！