使用 AJAX 调用更新的出厂值同步指令数据

Question

我有两个简单的指令，我们称它们为 blue 和 red。我需要的是让它们以这样一种方式工作：当我单击 red 指令中的按钮时，blue 中的值会自动更新。反之亦然。

使用工厂非常简单...直到更新数据的函数变成一个 $http 调用，该调用仅在成功完成后才更改数据。

我这里有一个没有 $http 的工作 pluker: http://plnkr.co/edit/Dyy3AEu68OwjRqLahXMX?p=preview

这是我对 $http 的尝试： http://plnkr.co/edit/FD2538Ji4NbvY5wrjYgz?p=preview

我是不是遗漏了什么，或者这不是解决问题的方法？我知道可以使用 $broadcast 来完成，但对我来说这似乎有点矫枉过正。

Answer 1

已为您修复：http://plnkr.co/edit/rrowocPucUFAN6Ii1COf?p=preview

您在工厂中使用 'data'，并在成功回调中用作变量名。

这是有问题的部分：

myFactory.$inject = ['$http'];
function myFactory($http) {

    var data = {};

    data.blueData = 0;
    data.redData = 0;

    data.changeBlueData = function () {
        $http.get('http://httpbin.org/ip').
            success(function(response, status, headers, config) {  // Changed "data" to "response";
                data.blueData++;
            });
    };

    data.changeRedData = function () {
        $http.get('http://httpbin.org/ip').
            success(function(response, status, headers, config) {  // Changed "data" to "response"
                data.redData++;
            });
    };

    return data;
}

Response 是一个更清晰的变量名，并且是来自 AJAX 的 return 的标准名称。

Answer 2

问题在于这些行：

success(function(data, status, headers, config) {

您已有一个数据变量，成功函数参数同名。您应该将其更改为：

success(function(ajaxData, status, headers, config) {

使用 AJAX 调用更新的出厂值同步指令数据

Sync directive data with factory value updated by an AJAX call

javascript

ajax

angularjs

angularjs-directive

angularjs-factory