Javascript 控制器函数作为回调函数执行

我将html的部分（

div

）更改为指令，在更改之前，我的html如下所示：

<div ng-controller="SearchCtrl as search">
    <div id="firstDirective">
        .
        .
        .
    <div>
    <div id="secondDirective">
        .
        .
        .
    <div>
</div>

然而，日志显示：

[LOG]clickSearch log, data: {}
[LOG]retrieve log, data: {...//some assigned values}

看起来clickSearch函数首先完成，然后

retrieve

函数稍后执行，因此我得到了空数据。我的背景是Java，所以我不完全理解JavaScript中回调的概念，我怀疑这就是这里发生的事情。我该怎么补救呢？谢谢。

试试这个

app.controller('SearchCtrl', ['$scope', '$http', function($scope, $http){

var self = this;

self.data = {};

self.clickSearch = function() {

    self.retrieve(param1, param2, function(data){
       .
       .
       .
        console.log('clickSearch log, data: ', data);
        console.log('clickSearch log, data: ', self.data);
    });
}

// retrieve is reused, called directly in some parts of html, 
// thus I attached it as a controller function
self.retrieve = function(param1, param2, callback) {

    // some $http.get and assign to data
    .
    .
    .

    console.log('retrieve log, data:', self.data);
    callback(data);//$http.get{url:url,success:callback}
}
// some other functions, some are passed to the directives
.
.
.

---

}))

从代码的外观来看，对

clickSearch

的任何调用都将触发一个“检索”日志，后跟一个“clickSearch”日志，因为它们是同步发生的。但是，如果这些语句中的一个嵌套在传递给指令的另一个函数（回调）中，情况就不同了。顺便说一下，这可能是因为您的Java背景，但是这里几乎没有任何理由声明

数据

，

单击搜索

和

检索

作为

此

的成员。只需声明局部变量，它将更易于使用和推理。（在Java中不这样做的原因是缺乏对词法闭包的支持）。@ValentinWaeselynck“局部变量”是什么意思哪一个是本地的？控制器内部？可能无法使它们成为本地的，因为我需要将这些数据和方法公开为控制器属性，以便在html部分调用它们。将它们暴露于HTML包括使它们成为

$scope

对象的属性，而不是控制器对象的属性。

[LOG]clickSearch log, data: {}
[LOG]retrieve log, data: {...//some assigned values}

app.controller('SearchCtrl', ['$scope', '$http', function($scope, $http){

var self = this;

self.data = {};

self.clickSearch = function() {

    self.retrieve(param1, param2, function(data){
       .
       .
       .
        console.log('clickSearch log, data: ', data);
        console.log('clickSearch log, data: ', self.data);
    });
}

// retrieve is reused, called directly in some parts of html, 
// thus I attached it as a controller function
self.retrieve = function(param1, param2, callback) {

    // some $http.get and assign to data
    .
    .
    .

    console.log('retrieve log, data:', self.data);
    callback(data);//$http.get{url:url,success:callback}
}
// some other functions, some are passed to the directives
.
.
.