Question

我的AngularJS服务定义如下：

function testService(testProvider) {
  var ref = this;
  ref.firstLevel = {};
  ref.secondLevel = {};

  initialize();

  function initialize() {
    testProvider.getData().then(function(result) {
      ref.firstLevel = result;
      ref.secondLevel.testData = result;
    });
  }
}

testProvider是$ http.get的一个简单包装器，它从JSON中获取数据。控制器复制这些属性：

function testController(testService) {
  var vm = this;

  vm.firstLevel = testService.firstLevel;
  vm.secondLevel = testService.secondLevel;
}

当我在模板中创建绑定时，第二级工作，第一级不起作用。

<!-- Doesn't work -->
<p>{{vm.firstLevel.testProperty1}}</p>  
<p>{{vm.firstLevel.testProperty2}}</p>

<!-- Does work -->
<p>{{vm.secondLevel.testData.testProperty1}}</p>  
<p>{{vm.secondLevel.testData.testProperty2}}</p>

有关工作示例，请参阅此Plunker：

https://plnkr.co/edit/pLInqcaJNhhbQWbvTUEE

为什么第一级示例不起作用？

Answer 1

这是因为当您在Javascript中覆盖对象时，实际上会丢失对实际对象的引用。

testProvider.getData().then(function(result) {
    ref.firstLevel = result;
    ref.secondLevel.testData = result;
});

此处ref.firstLevel = result会覆盖对已初始化为{}的对象的引用。在此行之后，您对该对象的任何数据绑定都将丢失。

然而，通过执行ref.secondLevel.testData = result，您不会重写对象，而只是通过添加额外的键testData来修改对象。因此，仍然保留了引用，AngularJS绑定也是如此。

有关更清晰的信息，请参阅this answer。

为什么绑定工作在第二级但不在第一级？

1 个答案: