AngularJS：动态数据的重复(AngularJS: ng-repeat with dynami

我建立一个简单的应用程序AngularJS，但我没能解决关于服务，NG-重复和动态添加数据的问题。

我想要做的

我的页面被分裂成几个countrollers。 在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被绑定到Storage.data价值slidesCtrl

因此，当用户在文本框中输入的东西，并按下按钮（homeCtrl），服务器应该将返回的数据Storage服务，并采用NG-重复（slideCtrl）呈现数据。 如果我用硬编码[2，3，4，5]例如，一切都OK（我得到测试的4倍，因为NG重复的），在存储服务器中的数据，但如果数据采取API调用， NG-重复不工作。

码

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

Answer 1:

我发现

angular.copy(data, output);

作为解决方案。

你可以看到这个主题的更多信息， 两个控制器与服务AngularJS之间共享的动态数据

谢谢大家。

Answer 2:

我怀疑这是由于在滞后AJAX调用和前角执行服务AJAX调用。 由于没有一个范围的正在发生变化，角度未检测的变化，因此其不反映在您的

可能的解决方案

在使用存储服务一个getter得到段落和调用getter方法从slidesCtrl ，像这样。

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

Answer 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 ，数据实际上将被更新。

文章来源: AngularJS: ng-repeat with dynamic data