Question

我刚开始使用AngularJS，构建我的第一个测试网络应用程序。我有几个控制器共享相同的模型。

这是我的模特：

uxctModule.factory ("ModelData", function () {
   var data = {
        param1: '', 
        param2: '',
        param3: '',
        [more params....]
   }
   return data
});

所以这是我的控制器的一个例子

uxctModule.controller ('PageOne', function ($scope, ModelData){
    $scope.data = ModelData;
    [do things here]
});

我现在正试图通过从文件加载字符串来更改模型，我希望应用程序能够相应地更新。所以在控制器中我加载文件并尝试更新模型：

uxctModule.controller ('NavigationController', function ($scope, ModelData) {
     $scope.data = ModelData;
     $scope.browsePressed = function (evt) {

        var f = evt.target.files[0]; 
        if (f) {
            var r = new FileReader();
            r.onload = function(e) { 
                var contents = e.target.result;
                console.log (contents);
                console.log ("ModelData was " + ModelData.param1);
                ModelData = JSON.parse(contents);
                console.log ("ModelData is now " + ModelData.param1);
            }

            r.readAsText(f);
        }
        else { 
            alert("Failed to load file");
        }
     }
});

我已经构建了一个＆＃34;调试器＆＃34;在html中看到模型的div：

<div id="debuggerBox" ng-controller="Debugger" width='300'>
        <pre>{{data | json}}</pre>
    </div>

......其控制器只是：

    uxctModule.controller ('Debugger', function ($scope, ModelData){
    $scope.data = ModelData;
});

现在，当更改加载外部文件的模型内容时，我可以在控制台上看到正确的日志（值已更改），但在调试器框中，Model对象仍保留旧值。正如我所说，我是AngularJS的初学者，所以也许我在这里做了一些非常错误的事情。任何帮助表示赞赏：）

Answer 1

问题是你要替换整个对象：

ModelData = JSON.parse(contents);

有了这个，ModelData引用了另一个对象，但原始对象未被修改。

您可以通过逐字段复制到ModelData来解决此问题。示例代码：

var tempModelData = JSON.parse(contents);
ModelData.param1 = tempModelData.param1;

或者您可以尝试angular.copy：

angular.copy(JSON.parse(contents), ModelData);

同时尝试$scope.$apply让角度意识到这些变化：

$scope.$apply(function(){
       angular.copy(JSON.parse(contents), ModelData);
});

AngularJS - 更新由不同控制器共享的模型

1 个答案: