AngularJS - 对象分配不起作用

时间:2015-02-16 13:48:28

标签: javascript angularjs

下午好,

我有一个关于AngularJS的问题:

在我的html模板中有一个按钮:

<button class="btn btn-default" ng-click="updateData(testVar)">do it</button>

如果单击该按钮,将触发一个函数,该函数将更新传递的$ scope变量。

此变量具有以下结构:

$scope.testVar =
{
id: 1,
name: 'angular',
obj:
{
    obj1: 'object1',
    obj2: 'object2'
}
};

这是我更新$ scope变量的函数:

$scope.updateData = function(param)
{
param = getData();
}

function getData()
{
return {
    id: 2,
    name: 'test',
    obj:
    {
        obj1: 'object3',
        obj2: 'object4'
    }
};
}

我的问题是,在函数完成后,$ scope变量仍然具有与之前相同的值。

如果我只更新变量的属性,它可以工作:

param.name = getData().name;

我不明白这是多么有效。如果有人能为我解释这个过程,我会很高兴。

3 个答案:

答案 0 :(得分:1)

那是因为你只是将一个引用交换为另一个引用。 $scope指向的原始引用是旧对象。

当您更新单个属性时,param$scope.testVar仍然指向同一个对象,因此它可以按预期工作。

稍微扩展一下,如果我们在更详细的运行时写出来,请说:

当您的控制器初始化时:

  1. 在对象testVar
  2. 上创建名为$scope的属性
  3. 在堆{...}上创建一个对象,并将其引用分配给$scope.testVar
  4. 当你的功能运行时:

    1. 获取有关范围的testVar的引用,并将其传递到函数updateData(),其中局部变量名称为param
    2. 执行testData()并在堆{...}
    3. 上创建新对象
    4. 将对象的引用分配给局部变量param
    5. param现在指向堆上的新对象,$scope.testVar仍然指向它在初始化时所做的同一个对象。
    6. [仅供后代]

      1. 执行updateData()结束,param从堆栈中弹出。
      2. 垃圾收集器发现没有任何东西指向testData()创建的对象,并通过释放它占用的内存将其从堆中删除。

答案 1 :(得分:1)

您正在使用新对象替换param的引用,而不是分配给$scope.testVar。这样做:

$scope.updateData = function() {
   $scope.testVar = getData();
};

答案 2 :(得分:0)

您只是更新函数范围内的param值,您需要通过$ root.testData = getData();

更新它