Question

var foo = angular.module('foo', []);

foo.factory('apiService', function($http){
    'use strict';

    return {
        getItems: function() {
            return $http.get('api/get-items')
                .then(function(result) {
                    return result;
                });
        }
    };
});

OutlastApp.controller('ItemListCtrl', function ($scope, apiService) {
    'use strict';

    apiService.getItems().then(function(result) {
        $scope.items = result.data;
    });
});

OutlastApp.controller('AddItemCtrl', function ($scope, $http, $rootScope, apiService) {
    'use strict';

    ...

    $scope.saveItem = function(item) {
        $http({
            url: 'api/add-item',
            method: 'GET',
            params: {
                name: item.name,
                description: item.description,
                ...
            }
        }).success(function(data, status, headers, config) {
            // TODO: What to do?
        });
    };
});

正如您所看到的，我已设置$scope.items以从AJAX调用中获取其内容。

我想要完成的是我想尝试更新$scope.items，以便它反映新添加的项目。

我该怎么做？这是在API和范围变量之间进行双向绑定的正确方法吗？

Answer 1

鉴于我在这里可以看到你需要分享两个控制器之间的“items”集合。为此，您可以使用工厂来存储项目集合（大约）：

app.factory('SharedDataService', function () {
    return {
        items: []
    };
});

创建完成后，您可以将其注入两个控制器，“items”对象将在它们之间共享。然后你可以在保存后推送新项目：

$http({
    // run your call here
}).success(function(data, status, headers, config) {
    // Here is where you push the new/saved item into the shared data:
    SharedDataService.items.push(item);
});

应该真的这样做。祝你好运！

视频教程 - 如果你之前没有见过这个概念 - 截至目前 - John Lindquist有一个很棒的video tutorial here。

Angularjs - 在AJAX操作后更新范围变量

1 个答案: