javascript - Angular .js : Is it not possible to assign properties of a resolved promise to $scope?

Question

我正在尝试重构一个应用程序，该应用程序一直在使用 Ajax 获取一些服务器数据，然后将其附加到 $rootScope 以便在引导应用程序之前获取 Controller 和服务，我一直在尝试使用 $q

promise 这样做

plnkr: http://plnkr.co/edit/22yQUlyE9nbQ0WVjxWxY

在那个 plnkr 中，我试图让服务返回一些数据供一些 Controller 使用。

app.service('data', function($q, $window, $timeout) {
   var promise = $q.defer();
   promise.promise.foo = 'Dang!';
   $timeout(function() {
     console.log('resolve promise');
     promise.resolve({
      foo: 'bar',
      baz: 'zot'
     });
   }, 1000);
   console.log('return promise');
   return promise.promise
});

我正在像这样使用 $routeProvider 的 resolve-property

app.config(function($routeProvider) {
  $routeProvider.when('/', {
    controller: 'MainController',
    templateUrl: 'data.html',
    resolve: {
      data: 'data'
    }
  });
});

但是，当我尝试在我的一个 Controller 中将已解决 promise 的“foo”属性分配给 $scope 时，它​​就出错了。

app.controller('MainController', function($scope, data) {
  $scope.main = data.foo;
});

app.controller('Controller1', function($scope, data) {
  $scope.controller1 = data;
});

$scope 在 promise 解析时不会更新，实际 promise 对象的 foo 属性最终在 $scope 上作为可以在http://plnkr.co/edit/22yQUlyE9nbQ0WVjxWxY?p=preview上看到

那么我是否正在做一些我绝对不应该在这里做的事情，通过将 promise 的属性分配给 $scope？我的印象是路由的 resolve-property 意味着在 promise 被解决之前，什么都不应该被初始化。

Answer 1

看起来发生的事情是时间问题。实例化服务时，它会设置超时。然后将 Controller 实例化，将 $scope.main 设置为 data 的属性，但不设置为 data 引用的对象。

当您将此嵌套属性分配给另一个引用时，您将失去跟踪父引用更改的能力，因为对该属性的此引用将始终指向旧值。当您在 Controller1 中引用同一对象 (data) 时，您不会遇到此问题，因为引用所指向的对象的属性只是被覆盖了。如果 resolve 方法正在将新对象写入数据，从而更改引用，您会看到同样的问题。

分为几个步骤:

1) 数据服务被实例化并返回一个对象，该对象具有单个属性 foo，指向一个值为 Dang! 的字符串对象。

2) MainController 被实例化，并将作用域的 main 属性设置为数据服务的 foo 属性中保存的对象。这是重要的部分，因为主要属性只知道对象 Dang!。

此外，Controller1 被实例化并将作用域的 controller1 属性设置为作为数据服务的对象。

3) 计时器触发并将数据对象的属性覆盖为其他一些属性。由于 data 中的对象未被替换，controller1 可以看到每个属性的新值。由于 main 指向包含值 Dang! 的对象，因此它没有任何变化。如果它引用的对象的值发生变化，它只会注意到变化，并且由于 javascript 中的字符串值是不可变的，因此它无法改变。

要解决您的情况，如果您希望范围的属性随着服务的变化而变化，您需要绑定(bind)到您的服务并在表达式中引用这些属性。