使用不触发模型更改的服务使用 $http 更新模型答案

【问题标题】：Update model with $http using a service not triggering model change使用不触发模型更改的服务使用 $http 更新模型
【发布时间】：2015-08-19 00:35:54
【问题描述】：

我有以下型号：

 var MODEL = { myTable: [], anotherTable: [] }; //--- initially set as empty arrays

MODEL 是一个全局变量，用于在不同的控制器中绑定应用模型。

我设计了一个更新模型的服务，从返回表格行的 php 页面获取数据：

myApp.factory('myAppUtils', function($http) {
     return {
            updateModelTable: function(tableName) {
                var pageToCall = "";
                var params = "";
                switch(tableName){
                    case 'myTable':
                        pageToCall = "myTable.php";
                        params = "";
                        break;
                    case 'anotherTable':
                        break;
                    default:
                        break;
                }

                var updateModel = function(tableName, data){
                    MODEL[tableName] = data;
                };

                var url = "/" + pageToCall;
                $http.get(url).
                    success(function(data, status, headers, config) {
                        updateModel(tableName, data);
                    }).
                    error(function(data, status, headers, config) {
                        alert("error");
                    });
            }
        };
});

然后是其中一个控制器：

myApp.controller("MyTableCtrl", function($scope, myAppUtils){
    $scope.table = MODEL.myTable;
    myAppUtils.updateModelTable("playersTable");
});

一旦我运行应用程序，myAppUtils.updateModelTable() 函数被正确调用，它确实成功更新了MODEL，但由MyTableCtrl 控制的视图没有相应地更新。

我要做的是设置某种 CRUD 操作，从 sql db 获取和设置值。例如，我想插入一条新记录，然后调用更新函数来更新模型和视图，但这并没有发生。

这是做事的正确“角度”方式吗？

有什么提示吗？我做错了什么？

提前致谢

【问题讨论】：

如何将$scope.model绑定到MODEL，然后在你的视图中访问{{model.myTable}}？
看起来您首先将 $scope.table 分配为等于 MODEL.myTable （这是一个空数组，在分配时），然后您正在更新表，您正在替换空数组在MODEL 中有一个对象。不过，$scope.table 仍然等于空数组。
是否有任何特定原因必须有一个全局变量来保存所有表值？一般来说，这有点反模式。
@Claies 我正在学习角度，所以我可能会犯错误。您建议如何进行？我想在不同的视图之间共享相同的模型。我认为全局变量是一个很好的方法
@BeNdErR 就像 Claies 一样，在代码中保存全局变量不是一个好主意，更好的解决方案是创建一个服务来在控制器之间共享数据，请参阅下面的答案。另外，更多样例可以参考stackoverflow.com/questions/30507754/…。

标签： angularjs http model angularjs-service

【解决方案1】：

您可以使用单独的服务来缓存数据，而不是使用全局变量在控制器之间共享数据，因为 Angular Service 是单例的。

所以在你的情况下，创建一个服务

myApp.service('modelService',function() {
    var model = {
      myTable: [],
      anotherTable: []
    };

    return model;
});

然后在您的工厂中，注入此服务并将您的 updateModel 更改为

var updateModel = function(tableName, data){
    modelService.myTable = data;
};

在你的控制器中，注入modelService 并将其绑定到$scope

$scope.model = modelService;

最后，在您看来，您可以访问model.myTable，一旦您在工厂更新它们就可以自动更新。

【讨论】：

@Rebornix 是的，终于有人知道如何做对了。此外，您可以阅读我对这个线程 stackoverflow.com/questions/30508773/… 的回答，其中提供了一些关于使用控制器绑定到工厂/服务的常见问题的一些信息。