Question

我正在创建一个单页的AngularJS Web应用程序。我的应用程序需要能够查询后端服务以获取有关用户状态的一些信息，并且此状态信息需要可用于单页应用程序的各个部分。我创建了一个服务来管理这个功能，但是我很难以对我来说合理的方式挂钩。

最初，我有这样的事情......

<service.js>
...
var url = 'www.my-backend.com';
this.val = [
    {
        name: 'undefined',
        isValid: false
    }
];
$http.get(url, {})
    .success (function (data) {
        this.val = data;
    })
    .error (function () {
        this.val =  [
            {
                name: 'error',
                isValid: false
            }
         ];
    });
...

然后在我的控制器中......

<controller.js>
...
$scope.val = service.val
...

虽然这不起作用（val.name'未定义'），可能是因为service.val在get请求有机会终止之前绑定到控制器的$ scope。但是，这似乎与我读到的内容here不一致。

我接下来要做的就是这个......

<service.js>
...
var url = 'www.my-backend.com';
this.valPromise = $http.get(url, {});
...

然后在我的控制器中......

<controller.js>
...
$scope.val = [
    {
        name: 'undefined',
        isValid: false
    }
];
service.valPromise
    .success (function (data) {
        $scope.val = data;
    })
    .error (function () {
        $scope.val =  [
            {
                name: 'error',
                isValid: false
            }
         ];
    });
...

这很有效，但我不喜欢它。我觉得这个逻辑属于服务。

所以我接下来要做的就是完成我发现here的各种建议，尽管它们似乎都没有达到预期的效果。我也看到了this，但它似乎有点矫枉过正，并不适用于我的问题。

理想情况下，我真的想知道如何让我的第一次尝试工作（通过引用将我的服务变量紧密绑定到我的控制器范围），但如果这不是可以在Angular框架内真正完成的事情，那么我很高兴使用某种watch行为。任何人都可以发现我做错了什么或为什么我的服务变量没有正确地连接到我的控制器？

Answer 1

在$http回调中this不是服务。您可以在SO上找到关于this含义的大量答案。您需要通过变量引用服务。

第二个问题是this.val = data;会为服务分配一个新值，但不会更改范围中的数据，这仍然指向旧数组。因此，您需要将新数据复制到现有阵列。

var service = this;
$http.get(url, {})
.success (function (data) {
    angular.copy(data, service.val);
})

Answer 2

前几天我遇到了这个问题。它没有被设置的原因是因为存在竞争条件并且因为数据访问在服务层内部，所以它每次都会丢失。似乎应该有一个简单的方法来做到这一点。我最初只是让我的初始控制器进行数据访问调用，并在服务中设置属性以供其他控制器使用。

AngularJS：将服务变量绑定到Controller的$ scope上的值

2 个答案: