从Angular JS中的另一个控制器触发一个控制器中的服务调用

Question

我必须找到解决方案，但我找不到。

我的应用程序中有三种状态。搜索、搜索结果和搜索详情。

在我在搜索页面中提供一个用于搜索的交易密钥后，

结果显示在 UI Grid 中的搜索结果页面上，并且它们的事务状态为“等待批准”。

现在当我点击搜索结果页面上的交易密钥时..

我进入搜索详细信息页面。那是一个单独的控制器。

现在搜索详细信息页面上的批准按钮...

应将交易状态从“等待批准”更改为“已批准”。

这将通过后端的 StoredProcedure 完成。

所以我要做的就是

我还必须以某种方式更新搜索结果页面以反映状态已批准而不是等待批准。

但它们在 Angular 中是独立的控制器。

我怎样才能做到这一点？

更新

到目前为止，我所做的，但没有成功，是......

当点击批准按钮并返回结果时（即现在批准交易）

我再次通过 $rootScope.$broadcast 触发事务搜索

        var searchResultsParam = TransactionDataServices.getSavedSearchParams();

        console.log("Search Results Params that are set  ...");
        console.log(searchResultsParam);

        //Fire the transaction search again 
        $rootScope.$broadcast('gridRefreshMergeResult', searchResultsParam);

        myApp.hidePleaseWait();

        $("#accessDeniedModal").modal('show');

并在 SearchResult 的控制器上捕获相同的内容。

$rootScope.$on('gridRefreshMergeResult', function (event, arg) {
    window.alert("Fired from merge");

    console.log("In Event Args after broadcast from Merge");
    console.log(arg);

    //Fire the search again
    TransactionServices.getTransactionAdvSearchResults(arg).then(function (result) {
        console.log("Trans Search Results");
        console.log(result);

        //Set the Grid UI data again
        $scope.searchResultsGridOptions.data = '';
        $scope.searchResultsGridOptions.data = result;
        TransactionDataServices.setSearchResultsData(result);
    });
});

但这件事没有按预期工作？

有时会触发事件并且多次显示警报。

任何其他替代/更标准的实现相同的方法？

Answer 1

嗯，这是一种方法。单击批准并获得批准的记录后，您可以检索已批准的记录，然后发送带有更新数据的广播。广播由您的搜索控制器接收，然后使用其索引更新记录。

//search results controller
$scope.editRecord = function(record){
    $scope.editRecordIndex = $scope.searchResults.indexOf(record);

    //Edit record state
    $state.go("editRecord");
}

$scope.$on("RECORD_UPDATED",function(source,args){
      $scope.searchResults[editRecordIndex] = args;
});




//record approval controller
$scope.approve = function(record) {
    TransactionDataService.approve(record).then(function(response){
        $rootScope.$broadcast("RECORD_UPDATED",response.record);
    })
}

Answer 2

我通常使用 $rootScope 和 events 来做同样的事情，确保你只为 gridRefreshMergeResult 注册事件处理程序一次，有两种方法可以保证，要么通过执行 $rootScope.$on() 代码在控制器定义或 app.run() 中：

在控制器定义中使用：

angular.module('myApp', [])
.controller('myCtrl', function($scope, $rootScope, TransactionServices) {

// directly put your event handler registration here:
$rootScope.$on('gridRefreshMergeResult', function (event, arg) {
    window.alert("Fired from merge");

    console.log("In Event Args after broadcast from Merge");
    console.log(arg);

    //Fire the search again
    TransactionServices.getTransactionAdvSearchResults(arg).then(function (result) {
        console.log("Trans Search Results");
        console.log(result);

        //Set the Grid UI data again
        $scope.searchResultsGridOptions.data = '';
        $scope.searchResultsGridOptions.data = result;
        TransactionDataServices.setSearchResultsData(result);
    });
});

});

你可以用你写的同样的方式来触发它：

    var searchResultsParam = TransactionDataServices.getSavedSearchParams();

    console.log("Search Results Params that are set  ...");
    console.log(searchResultsParam);

    //Fire the transaction search again 
    $rootScope.$broadcast('gridRefreshMergeResult', searchResultsParam);

    myApp.hidePleaseWait();

    $("#accessDeniedModal").modal('show');

请注意，您的控制器必须至少加载一次才能注册处理程序。

使用 app.run()

angular.module('myApp')
.run(function($rootScope, TransactionServices) {

$rootScope.$on('gridRefreshMergeResult', function (event, arg) {
    window.alert("Fired from merge");

    console.log("In Event Args after broadcast from Merge");
    console.log(arg.arg);

    //Fire the search again
    TransactionServices.getTransactionAdvSearchResults(arg.arg).then(function (result) {
        console.log("Trans Search Results");
        console.log(result);

        //Set the Grid UI data again
        args.scope.searchResultsGridOptions.data = '';
        args.scope.searchResultsGridOptions.data = result;
        TransactionDataServices.setSearchResultsData(result);
    });
});
});
});

使用 app.run()，你必须在 args 中传递 $scope：

    var searchResultsParam = TransactionDataServices.getSavedSearchParams();

    console.log("Search Results Params that are set  ...");
    console.log(searchResultsParam);

    //Fire the transaction search again 
    $rootScope.$broadcast('gridRefreshMergeResult',{arg: searchResultsParam, scope: $scope }); // you have to provide a reference to current $scope.

    myApp.hidePleaseWait();

    $("#accessDeniedModal").modal('show');