无法在 AngularJS 中修改工厂方法中的变量

Question

好的，首先，我是 AngularJS 的新手。我试图搜索对其他答案有帮助的东西，但找不到任何东西来解决我的问题。

听说是这样。我开始 "test project" 以提高我的 angular 技能。到目前为止，我能够从 Rest Service 获得 JSON。我的下一步是获取它，但从配置文件加载 URL。我正在以一种非常简单的方式进行操作，只需从我的本地服务器获取配置文件，因为它是存储在那里的 JSON 文件。

我当然知道问题在于理解变量的生命周期。但是在阅读了一些文档之后，没有什么新的...

这是我的控制器：

app.controller('LoginController', [
    '$scope',
    'props', //this gets the properties file (json)
    'HttpResourceProvider', //this gets any json from a rest service
    function($scope, props, httpResourceProvider) {
        var myData;
        props.success(function(data) {
            console.log("1: "+myData); //undefined
            serverVersion = myData;
            console.log("2: "+myData); //defined
        });
        console.log("3: "+myData); //undefined
        httpResourceProvider.call(
                "http://localhost:8080/.../2.5", //instead of 2.5, 
                //here should go the constant myData.version
                function(data) {
                    $scope.serverVersion = data;
                });
        console.log($scope.serverVersion); //undefined?
        $scope.date = new Date();

        $scope.login = function() {
            console.log("hey" + $scope.user + " " + $scope.password);
        };
    } ]);

问题出在"props"工厂，我不知道如何修改全局变量"myData"，因为函数中的"myData"变量当然只是一个不同的变量。

实际上我在另一个工厂方法 "httpResourceProvider" 之后放了另一个 console.log 来查看 $scope.serverVersion 的结果和同样的问题！在这里我印象非常深刻，因为我当然可以在视图上使用这个变量...

关于如何修改我的代码以使其工作的任何建议？或者任何有用的文档来了解更多关于这个主题的信息？欢迎任何帮助。

非常感谢！

Answer 1

问题是你做了几个异步调用，但你把它们当作同步调用，异步的顺序是这样的：

httpResourceProvider.call - async
console.log($scope.serverVersion); //undefined?
httpResourceProvider完成，解决
执行解析函数：function(data) { $scope.serverVersion = data; });

所以你的下一行依赖于一些异步数据的代码在加载数据之前已经在执行，因此是未定义的。

有关 promise 以及如何正确链接它们的更多信息，我建议您访问 read this article.

Answer 2

正如@k102 所提到的，这种事情最好通过在配置时注入信息来完成。生命周期的配置部分先于引导，因此如果需要异步调用来检索信息，则必须使用延迟引导。

另一个更简单的选择是创建一个 JavaScript 文件，其中仅包含 AngularJS 调用以创建 serverVersion 常量值。例如，该文件可能仅包含此代码：

angular.module("MyApp").value("serverVersion", "2.5");

请注意，"MyApp" 是您对模块的称呼。

然后将该文件与其他脚本文件一起包含，并将常量注入到您的模块中，如下所示：

app.controller('LoginController', [
    '$scope',
    'serverVersion', // injects the server version value
    'props',
    'HttpResourceProvider',
    function($scope, serverVersion, props, httpResourceProvider) {
        // serverVersion === '2.5'

无法在 AngularJS 中修改工厂方法中的变量

Cannot modify a variable on factory method in AngularJS

javascript

angularjs

lifecycle