无法在AngularJS

时间:2016-01-20 14:29:35

标签: javascript angularjs lifecycle

好的,首先,澄清一下我对AngularJS的新观点。我试图在其他答案上寻找有用的东西但找不到任何可以解决我问题的东西。

所以听到它。我正在开始一个“测试项目”来提高我的角度技能。 到目前为止,我能够从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);
        };
    } ]);

问题来自于“道具”工厂,我不知道如何修改全局变量“myData”,因为函数中的“myData”变量当然只是一个不同的变量。

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

那么有关如何修改我的代码以使其有效的任何建议?或者任何有用的文档来了解有关此主题的更多信息欢迎任何帮助。

非常感谢!

2 个答案:

答案 0 :(得分:1)

问题是你做了几次异步调用,但是你把它们视为同步调用,异步的顺序就是这样:

  1. httpResourceProvider.call - async
  2. console.log($scope.serverVersion); //undefined?
  3. httpResourceProvider已完成,已解决
  4. 执行解析功能:function(data) { $scope.serverVersion = data; });
  5. 因此,在加载数据之前,依赖于某些异步数据的下一行代码已经执行,因此未定义。

    有关承诺以及如何正确连结承诺的详情,我建议您 read this article

答案 1 :(得分:0)

正如@ 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'