AngularJS：将服务变量绑定到控制器的$ scope上的值

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是“ undefined”），大概是因为在get请求有机​​会终止之前， service.val已绑定到控制器的$ scope。 但是，这似乎与我在此处阅读的内容有所不同。

我接下来要做的是...

<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
            }
         ];
    });
...

这行得通，但我不喜欢它。 我觉得这种逻辑属于服务范围。

因此，我接下来要做的就是研究在这里找到的各种建议，尽管这些建议似乎都没有达到预期的效果。 我也看到了这一点 ，但似乎有点过分了，并且不适用于我的问题。

理想情况下，我真的很想弄清楚如何使我的第一次尝试工作（通过引用将我的服务变量紧密地绑定到我的控制器作用域中），但是如果在Angular框架中不能真正做到这一点，我很乐意使用某种watch行为。 谁能发现我做错了什么，或者为什么我的服务变量没有正确地连接到我的控制器上？

Answer 1

在您的$http回调中， this不是服务。 你会发现很多有关的含义答案this对SO。 您需要通过变量引用服务。

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

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

Answer 2

前几天，我遇到了这个问题。 之所以未设置它，是因为存在竞争条件，并且由于数据访问位于服务层内部，因此每次都会丢失。 似乎应该有一种简单的方法来执行此操作。 我最终只是让我的初始控制器进行数据访问调用，并在服务中设置属性以供其他控制器获取。