javascript - AngularJS:将服务变量绑定(bind)到 Controller $scope 上的值

Question

我正在创建一个单页 AngularJS 网络应用程序。我的应用程序需要能够查询后端服务以获取有关用户状态的一些信息，并且此状态信息需要可供单页应用程序的各个部分使用。我创建了一项服务来管理此功能，但我无法以对我来说合理的方式进行连接。

最初，我的设置是这样的......

<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 中...

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

虽然这不起作用(val.name 是“未定义的”)，大概是因为 service.val 在 之前绑定(bind)到 Controller 的 $scope get 请求有机会终止。然而，这似乎与我读到的不一致 here .

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

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

然后在我的 Controller 中...

<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 ，但这似乎有点矫枉过正，并不真正适用于我的问题。

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

Answer 1

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

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

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