使用angularjs将$ scope转换为this

时间:2014-08-28 20:23:13

标签: angularjs

我试图将我的angularjs范围函数和变量转换为使用' this'。我向github的api发出json请求,但我的绑定表达式没有显示任何内容。 HTML:

<div ng-controller="MainController">


    <div>
        Name: {{ user.name}}
        Location: {{ user.location}}
        Image: <img ng-src="{{user.avatar_url}}" />
    </div>

</div>


 (function () {

            var app = angular.module("githubViewer", []);

            app.controller('MainController', function ($http) {


                this.user = [];
                this.error = "";

                this.onUserComplete = function (response) {


                    this.user = response.data;
                    console.log(this.user);
                }

                this.onError = function (reason) {
                    this.error = "Could not fetch the user";
                    return true;
                }

                $http.get("https://api.github.com/users/robconery").then(this.onUserComplete, this.onError);

            });



        })();

2 个答案:

答案 0 :(得分:1)

由于this的回调已在$http的回调中发生变化,您应该声明一个可用于保持相同上下文的变量

     (function () {


       var app = angular.module("githubViewer", []);

    app.controller('MainController', function ($http) {

        var self=this;
        self.user = [];
        self.error = "";

        this.onUserComplete = function (response) {


            self.user = response.data;
            console.log(self.user);
        }

        this.onError = function (reason) {
            self.error = "Could not fetch the user";
            return true;
        }


       $http.get("https://api.github.com/users/robconery").then(self.onUserComplete, self.onError);

    });


    })();

答案 1 :(得分:0)

我认为您可能指的是John Papa建议您使用this创建Controllers方法的方法。但是,我个人没有找到偏离标准的好处,但是如果你仍然想要它,那么你可以阅读更多关于这篇解释它的文章:

http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

快速示例演示:

app.controller('MainController', function(){
  var vm = this;
  vm. error = '';
  vm.onUserComplete = function(response){
    console.log(vm.error);
  };

});