代码之家 › 专栏 › 技术社区 › Rahul Dadhich

AngularJS对象应该独立工作

angularjs-scope angularjs javascript

3

Rahul Dadhich · 技术社区 · 7 年前

我试过以下代码:

控制器:

myApp.controller("abc", function($scope, lastday_data){
    $scope.objectiveData = [];
    $scope.doneData = [];

    // call service & get data from server
    lastday_data.getData().then(function(success){
        $scope.objectiveData = success;
        $scope.doneData = success;
        $scope.$digest();  // *---> $digest() used*
    },function(error){
        $scope.objectiveData = null;
        $scope.doneData = null;
    });

    // add task done
    $scope.addTaskDone = function() {
        var p = {"id": 101, "name": "testadd", "check": true};
        $scope.doneData.push(p);
        $scope.textDone = "";
    }
});

服务: --从服务器获取数据

myApp.service("lastday_data", function($http){
    this.getData = function() {
        return new Promise(function(resolve, reject){
            $http({
                method: 'GET',
                url: 'http://localhost/task/index.php/v1/example/users'
            }).then(function (response) {
                if(response.status)
                    resolve(response.data);
                else
                    reject();
            },function (error) {
                reject();
            });
        });
    }
});

问题: 当我打电话给管制员的时候 addTaskDone() 方法,此方法在中添加一个对象 doneData 数组,但此对象已添加到 objectiveData 也。

2 回复 | 直到 7 年前

1

0

Community Mohan Dere 6 年前

问题

$scope.objectiveData 和 $scope.doneData success ,所以如果你改变一个,另一个也会改变。

解决方案

$scope.objectiveData目标数据 和 $scope.doneData范围 成功 . 你可以用这个

纯JavaScript

Array.prototype.slice : $scope.doneData = success.slice();
Array.prototype.concat $scope.doneData = [].concat(success);
Array.from : $scope.doneData = Array.from(success);
Object.assign : $scope.doneData = Object.assign([], success);

AngularJS内置函数

angular.copy : $scope.doneData = angular.copy(success);
angular.extend : $scope.doneData = angular.extend([], success);
angular.merge ^{(自1.6.5以来已弃用,请参阅

known issues

)} : $scope.doneData = angular.merge([], success);

其他技巧

JSON.parse / JSON.stringify ^[1] :

$scope.doneData = JSON.parse(JSON.stringify(success));

所以呢

$scope.objectiveData = success;
$scope.doneData = success;

做

$scope.objectiveData = success.slice(); // get a copy of success
$scope.doneData = success.slice(); // get a copy of success

2

3

Pankaj Parkar 7 年前

基本上问题是 objectiveData doneData success , 目标数据 和 .

因此,基本上,您应该确保在为一个变量分配多个值时,创建该变量的克隆变量,然后将该变量赋给所需的变量。

在angularjs有 angular.copy 方法存在,这将帮助您创建具有新内存位置的对象的克隆。这将确保新变量将指向不同的内存位置。

控制器:

$scope.objectiveData = angular.copy(success);
$scope.doneData = angular.copy(success);

奖金: 很明显,您的服务实现是错误的,您正在明确地创建一个承诺,这就是您必须调用的原因 $digest .then 成功回调。这意味着您正在创建一个必须手动运行摘要循环的案例,因为代码将在angularjs上下文之外运行。相反,您应该返回现有的 $http $scope.$digest()

myApp.service("lastday_data", function($http) {
  this.getData = function() {
    return $http({
      method: 'GET',
      url: 'http://localhost/task/index.php/v1/example/users'
    }).then(function(response) {
      if (response.status)
        return response.data;
      else
        return $q.reject('Problem retrieving data');
    }, function(error) {
      return $q.reject(error);
    });
  }
});