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

我在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的初学者,所以也许我在这里做错了什么。任何帮助表示赞赏:)

土清

问题是您要替换整个对象

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档