【问题标题】：AngularJS: ng-repeat with dynamic dataAngularJS：带有动态数据的 ng-repeat
【发布时间】：2013-12-23 04:09:01
【问题描述】：

我正在构建一个简单的 AngularJS 应用程序，但我无法解决有关服务、ng-repeat 和动态添加数据的问题。

我要做什么

我的页面被分成几个计数器。在homeController 我有一个文本字段和一个按钮。当我按下按钮时，我正在对服务器进行 API 调用，服务器返回 JSON，我将数据设置为 Storage 服务。在这一部分中，一切正常 - 服务器按应有的方式返回数据，并将数据设置为服务，我在存储服务中得到 console.log('Data set!');。在第二个控制器（slidesController）我有一个ng-repeat

<div ng-controller="slidesCtrl">
    <div ng-repeat="current in paragraphs"> test </div>
</div>

正如您在下面的代码中看到的那样，paragraphs 绑定到slidesCtrl 中的Storage.data 值

因此，当用户在框中输入内容并按下按钮 (homeCtrl) 时，服务器应将返回的数据传递给 Storage 服务并使用 ng-repeat (slideCtrl) 呈现数据。例如，如果我使用 [2, 3, 4, 5] 对存储服务器中的数据进行硬编码，则一切正常（由于 ng-repeat，我进行了 4 次测试），但如果数据是通过 api 调用获取的， ng-repeat 不起作用。

代码

App.controller('homeCtrl', function ($scope, $http, Api) {...

    $scope.onprocess = function () {
        $scope.loading = true;

        Api(.....);
    }
});

App.controller('slidesCtrl', function ($scope, Storage) {


    $scope.paragraphs = Storage.data.paragraphs; // NOT WORKING IF DATA IS DYNAMICALLY ADDED

    $scope.paragraphs = Storage.test; // IF DATA IS PREDEFINED EVERYTHING IS FINE


});

App.factory('Api', function ($http, Storage) {
    return function (data) {
        $http.post('/api', {
            url: data.url,
            analyze: 0
        }).success(function (res) {....
            Storage.set(res);....
        }).error(function () {....
        });
    };
});

App.factory('Storage', function () {
    var output = {};

    var set = function (data) {
        output = data;
        console.log('Data set!');
    };

    return {
        set: set,
        data: output,
        test: [1, 2, 3]
    };
});

【问题讨论】：

请提供一个小提琴或一个 plunk...
这已经解决了。直到明天我才能标记答案。 @Abilash

标签： javascript api angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

我找到了

angular.copy(data, output);

作为解决方案。

您可以查看有关此主题的更多信息 Sharing dynamic data between two controllers with service AngularJS

谢谢大家。

【讨论】：

【解决方案2】：

我怀疑这是由于 AJAX 调用中的滞后，并且 Angular 在 AJAX 调用之前执行服务。由于没有任何范围发生变化，因此角度没有检测到变化，因此它不会反映在您的

可能的解决方案

在存储服务中使用 getter 来获取段落并从 slidesCtrl 调用该 getter 方法，就像这样。

App.controller('slidesCtrl', function($scope, Storage) {
    $scope.paragraphs = Storage.getParagraphs();
});

而在你的服务中，你可以这样使用它。

App.factory('Storage', function() {
    var output = {};

    var set = function(data) {
        output = data;
        console.log('Data set!');
    };

    return {
        set: set,
        getParagraphs: function () {
            return output && output.paragraphs;
        }
    };
});

【讨论】：

这个解决方案可以解决它:(

【解决方案3】：

问题在于您如何定义Storage 服务。

在set 函数中，您将直接分配给output 局部变量，这不会自动更新工厂返回对象的data 属性。

为了说明问题：

var output = {foo: 1, bar: 2};
function set(somenewdata) {
  output = somenewdata;
}
var obj = {data: output};
// obj == {data: {foo: 1, bar: 2}}

set({baz: 3});

// output == {baz: 3}
// but, obj == {data: {foo: 1, bar: 2}}

因此，如果您将存储服务更改为：

App.service('Storage', function() {
  this.data = {};
  this.set = function(newdata) {
    this.data = newdata;
  };
});

当控制器将属性绑定到Storage.data 时，数据实际上会被更新。

【讨论】：