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

前幾天，我遇到了這個問題。 之所以未設置它，是因為存在競爭條件，並且由於數據訪問位於服務層內部，因此每次都會丟失。 似乎應該有一種簡單的方法來執行此操作。 我最終只是讓我的初始控制器進行數據訪問調用，並在服務中設置屬性以供其他控制器獲取。