javascript - AngularJS - 更新不同 Controller 共享的模型

Question

我刚刚开始使用 AngularJS，构建我的第一个测试 Web 应用程序。我有几个共享相同型号的 Controller 。

这是我的模型:

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

这是我的 Controller 的示例

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

我现在尝试通过从文件加载字符串来更改模型，并且我希望应用程序能够相应更新。因此，在 Controller 中，我加载一个文件并尝试更新模型:

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

我在 html 中构建了一个“调试器”div 来查看模型:

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

...其 Controller 很简单:

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

现在，当更改加载外部文件的模型内容时，我可以在控制台上看到正确的日志(值已更改)，但在调试器框中，模型对象仍保留旧值。正如我所说，我是 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让 Angular 意识到变化:

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