控制器函数作为回调执行

Controller function executes as callback

本文关键字：回调 执行 函数 控制器      更新时间：2023-09-26

我将html的部分（div）更改为指令，在更改之前，我的html看起来如下：

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

其与相关联的控制器一起工作良好。我计划将html更改为：

<div ng-controller="SearchCtrl as search">
    <first-directive>
    <second-directive>
</div>

相应的angular.directive定义具有独立的作用域（return {..., scope: {attr: '=attr', func: '&func'},...}），并且属性和函数从控制器传递。在将第一个div更改为指令（first-directive）之后，它仍然工作良好。但是，在创建了second-directive并替换了相应的div之后，该部分就不再工作了（第一部分仍然工作）。这是我的控制器：

app.controller('SearchCtrl', ['$scope', '$http', function($scope, $http){
    var self = this;
    self.data = {};
    self.clickSearch = function() {
        self.retrieve(param1, param2);
        .
        .
        .
        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) {
        // some $http.get and assign to data
        .
        .
        .
        console.log('retrieve log, data:', self.data);
    }
    // some other functions, some are passed to the directives
    .
    .
    .
});

然而，日志显示：

[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
.
.
.

})；

相关文章：