Question

非常新的Angular.js并且有一个我无法弄清楚的问题。这是我的HTML

<user-details></user-details>

这是我的角度代码：

angular.
module('rtcTimesheet').
component('userDetails', {
    template:
        '<p>Hi {{$ctrl.username}}</p>',
controller: function UserDetailsController(globalDataService,$http) {

    if(globalDataService.getServicePath()) {

        try {
            this.username="name here";
            this.userId=""

            $http({
                method:     'GET',
                url:        globalDataService.getServicePath()+'login.php',
                params: {
                    t:      "log",
                    un:     "username",
                    pwd:    "123456789"
                }
            }).then(function(response){

                if(response.data.hasOwnProperty("HasError")) {
                    $("#debug").append("<p>ERROR: " + response.data.ErrorMessage+"</p>");
                } else {
                    username=response.data.name;
                    userId=response.data.id;
                    $("#debug").append(this.username);
                }

            },function (err){
                $("#debug").append("ERROR http: "+err.status);
            });
        } catch(err) {
            $("#debug").append("CATCH ERROR: "+err.status+"<br/>");
        }

    } else {
        $("#debug").append("<p>Unable to get service path...</p>");
    }


}
});

我知道数据正确返回，因为我可以使用

输出

$("#debug").append(this.username)

加载页面时，只会在此处显示初始名称＆＃39;。可能与从数据库中获取数据的轻微延迟有关，但不知道如何解决这个问题？

Answer 1

您的变量参考不正确。请检查下面的代码，将controllerAs refferance与_self一起使用。

angular.
module('rtcTimesheet').
component('userDetails', {
    template:
        '<p>Hi {{$ctrl.username}}</p>',
controller: function UserDetailsController(globalDataService,$http) {

    if(globalDataService.getServicePath()) {

        try {
            var _self = this;
            _self.username="name here";
            _self.userId=""

            $http({
                method:     'GET',
                url:        globalDataService.getServicePath()+'login.php',
                params: {
                    t:      "log",
                    un:     "username",
                    pwd:    "123456789"
                }
            }).then(function(response){

                if(response.data.hasOwnProperty("HasError")) {
                    $("#debug").append("<p>ERROR: " + response.data.ErrorMessage+"</p>");
                } else {
                    _self.username=response.data.name;
                    _self.userId=response.data.id;
                    $("#debug").append(_self.username);
                }

            },function (err){
                $("#debug").append("ERROR http: "+err.status);
            });
        } catch(err) {
            $("#debug").append("CATCH ERROR: "+err.status+"<br/>");
        }

    } else {
        $("#debug").append("<p>Unable to get service path...</p>");
    }


}
});

Angular不显示从$ http返回的数据

1 个答案: