Question

两个重要说明： 1.我的目标是在这种情况下避免使用$ scope，因为我的理解是阻碍了新的“控制器为”语法。 2.我的问题可能是一个可变范围问题，所以或许只是澄清正确的JS方法可能会解决问题。

没关系导出，我在我的工作流程中使用browserify。

我有工作代码：

exports.IntroCtrl = function($scope, $http) {
    $scope.introData = [];
    $http.get('data/intro.json')
        .success(function(res){
            $scope.introData = res;
    });

};

理想情况下，为了使用“controller as”语法，我想像这样工作。

exports.IntroCtrl = function($http) {
    this.introData = [];
    $http.get('data/intro.json')
        .success(function(res){
            introData = res;
    });

};

问题是$ http服务似乎在我的初始this.introData声明之前执行，因为我得到一个未定义的变量错误。

如果告诉this.introData = $http.get…那么它返回一个我无法访问的5个对象的数组，而intro.json只包含4个。

感谢您提供任何指导/帮助。

Answer 1

首先为http调用创建服务。在控制器中获取回调，然后将控制器指定为变量是非常方便的方法。这是您的工厂：

厂

app.factory('getDataService',function ($http) {
    return {
        getData:function(callback){
            $http.get('data/intro.json')
                 .success(callback)
            });

        }
    }
});

在您的控制器中，您将注入getDataService并绑定如下数据：

控制器：

app.controller('testController',['getDataService',function(testDataService){
    this.introData = [];
    testDataService.getData(function(data){
        this.introData = data;
    });
}]);

这里需要绑定控制器函数的introData。

Answer 2

你必须记住引用控制器实例的this变量，并在稍后的成功回调中使用它，如下所示：

exports.IntroCtrl = function($http) {
  this.introData = [];

  var ctrl = this; // remember 'this', the controller instance, to use in the success callback below

  $http.get('data/intro.json')
    .success(function (res) {
      ctrl.introData = res;
    });
};

希望这有帮助。

无法获取this.var来绑定AngularJs中的正确数据

2 个答案: