Question

这是我第一次尝试实施有承诺的服务，到目前为止，没有成功......

我正在使用AngularJS实现SPA，它可以在任何给定时刻显示无限数量的选项卡。有几十种不同的选项卡类型，每种都由自己的控制器管理。

在任何给定时刻，可以打开任意数量的选项卡，包括同一选项卡类型的多个实例（例如，用于编辑用户配置文件的选项卡可以显示两次，每个选项卡都包含不同用户的信息）。 / p>

我想实现一种通用机制，只要特定选项卡的数据发生变化，并且用户请求关闭它，就会显示一条警告消息，要求确认或取消关闭请求。

通过Index.html文件中的以下行激活显示警告消息的页面：

<div ng-if="Show_Data_Not_Saved_Confirmation_Flag=='Y'" 
     ng-include="'Pages/Data_Not_Saved_Confirmation.html'"
     style="z-index:1000000"></div>

，页面本身是：

<div id="Data_Not_Saved_confirmation_Page" 
     ng-controller="Data_Not_Saved_Confirmation_Controller" 
     style="position:fixed;top:0%;left:0%;min-height:100%;width:100%;margin-top:0px;margin-left:0px;background-color: rgba(0, 0, 0, 0.5);padding:0 10px 5px 10px;z-index:10000;padding:20px 0 20px 0;vertical-align: middle">

    <div style="padding:20px;margin:auto;position:fixed;top:50%;left:50%;width:450px;margin-top:-100px;margin-left:-100px;background:white;text-align:center;box-shadow: 5px 5px 5px black">
        <font size="9" color="red">
        <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
        </font>
        <div>
            <h3>
                Data was changed. Close tab without SAVE will cause data loss.
            </h3>
        </div>
        <br>
        <br>
        <div style="width:100%;margin:0px;padding:0px">
            <table style="width:100%">
                <tbody>
                    <tr style="height:60px">
                        <td ng-click="This_Page.Response = 'Proceed' ; Return_Selection()" style="cursor:pointer;background:mediumaquamarine;width:50%;">
                            <h2 style="margin:auto"><font color="white">{{All_Labels.Common.Proceed}}</font></h2>
                        </td>
                        <td style="min-width:10px">
                        </td>
                        <td ng-click="This_Page.Response = 'Cancel' ; Return_Selection()" style="cursor:pointer;background:red;width:50%">
                            <h2 style="margin:auto"><font color="white">{{All_Labels.Common.Cancel}}</font></h2>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>    

</div>

及其控制器：

MyApp.controller('Data_Not_Saved_Confirmation_Controller' , ['$rootScope' , '$scope' , 'Confirm_Tab_Closure' , function( $rootScope , $scope , Confirm_Tab_Closure ) {


    var askForPromise = Confirm_Tab_Closure.getPromise();

    $scope.This_Page          = {} ;
    $scope.This_Page.Response      ;

    $scope.Return_Selection = function(p_Action) {
        askForPromise.then(
            // OnSuccess function
            function(p_Action) {
            $scope.somethingRight = p_Action;
            }
        )
    }

}]) ;

我实现了如下服务：

MyApp.service('Confirm_Tab_Closure' , ['$rootScope' , '$q', function($rootScope , $q){

    $rootScope.Show_Data_Not_Saved_Confirmation_Flag     = "Y"        ; 
     var deferObject ;
     var myMethods = {
         getPromise: function(p_Callback) {
             var promise     =  p_Callback  ;
             var deferObject =  deferObject || $q.defer();

             promise.then(
                 // OnSuccess function
                 function(answer){
                     // This code will only run if we have a successful promise.
                     deferObject.resolve(answer);
                 },
                 // OnFailure function
                 function(reason){
                     // This code will only run if we have a failed promise.
                     deferObject.reject(reason);
                 });

             return deferObject.promise;
         }
     };

       return myMethods;

    }]);

并且，在选项卡的控制器中，服务的调用如下所示：

MyApp.controller('Create_Edit_View_User_Controller' , ['$rootScope' , '$scope' , 'DB_Services' , 'Confirm_Tab_Closure' , function( $rootScope , $scope , DB_Services , Confirm_Tab_Closure) {

// Handle Closure Request by User... ----------------------------------------------------------------------------------------------------------------------

$rootScope.$on('Close_Tab', function (event, data) {

    if (data.Tab_ID != $scope.Tab_Forward_Info.Tab_ID) {
        // Not me !!!
        return ;
    }

    var l_Confirmation = Confirm_Tab_Closure.getPromise() ;

    dummy = function() {
        console.log("Promised executed!!")
    }

    l_Confirmation(dummy) ;

    Cleanup() ;

    LLF_Remove_Tab($rootScope.Running_Tabs , data.Tab_ID ) ;
}) ;

我收到一条错误消息，指出“无法读取属性”，然后是“未定义”（错误的行是上面显示的服务定义中的then）。

AngularJS - 承诺提供常见警告消息的服务

0 个答案: