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

我刚从AngularJS开始，构建我的第一个测试web应用程序。 我有几个控制器共享同一型号

这是我的模型：

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

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

我在html中构建了一个“debugger”div来查看模型：

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

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

现在，当更改加载外部文件的模型内容时，我可以在控制台上看到正确的日志（值已更改），但在调试器框上，模型对象仍保留旧值。

---

正如我所说，我是AngularJS的初学者，所以也许我在这里做了一些非常错误的事情。感谢您的帮助：）

问题是您正在替换整个对象：

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

这样，

ModelData

引用另一个对象，但原始对象不会被修改

您可以通过将字段逐字段复制到

ModelData

来修复此问题。示例代码：

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

或者你可以试试：

也要让angular意识到这些变化：

---

虽然你的解释很有道理——真让我感到羞耻——但它仍然不起作用。我已经尝试了两种方法，调试器div仍然向我显示旧的值

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