带有承诺的ng-click事件

时间:2016-11-18 15:13:59

标签: javascript angularjs angularjs-directive

我有一个有角度的应用程序,基本上有一个指示显示内容取决于用户的类型,如果你的accountType是免费的,你的向导模式给你一些促销信息,但如果你的accounType不是免费的或专业的,它可以启动ng-click事件并显示您授权要查看的模式。

但是有一个问题,我得到,我相信,因为我需要承诺获得用户的当前accounType,并提供正确的信息有一种类型的延迟,2个模型被解雇起来。我认为不是显示一个模态,而是因为evt.stopProgation ......在一个承诺中。

这是我的代码: 指令:

angular.module('app')
    .directive('premiumContent',
        [
            '$http', '$q','UserService','$uibModal','$rootScope','WizardService',
            premium
        ]);


function premium($http, $q, UserService, $uibModal, $rootScope,WizardService) {
    return {
        restrict: 'A',
        priority: -1,
        link: function($scope, element, attrs, controller) {
            element.on( 'click', function( evt ){

                var clean  = attrs.ngClick.substring(0, attrs.ngClick.indexOf('('));
                var controllerName = clean.substring(0, clean.indexOf('.'));
                var clickTarget = clean.substring(clean.indexOf('.'),clean.length).replace('.','');


                if(attrs.counter == "false"){
                    WizardService.isBlock = false;
                }else{
                    WizardService.isBlock = true;
                }

                UserService.getAuthenticatedUser()
                    .then(function (response) {
                        response = response.data;
                        debugger;


                        var accountType = response.user.account_type_id;
                        var user = response.user;
                        var users = $scope.$eval(attrs.to);



                        //check if is passing more than one user (array/object)
                        if(typeof users === 'object'){
                            if(users.indexOf(accountType) !== -1){

                                //assign a user to hide
                                users = users[users.indexOf(accountType)];
                            }
                        }

                        if(users  !== accountType) {
                            evt.preventDefault()
                            evt.stopImmediatePropagation();

                                $uibModal.open({
                                    animation: true,
                                    backdrop: 'static',
                                    keyboard: false,
                                    templateUrl: 'template/sidebar/wizard',
                                    size: 'lg',
                                    controller: 'WizardController',
                                    controllerAs: 'wizardCtrl',
                                    resolve: {
                                        user: function () {
                                            return user
                                        },
                                        modalName: function () {

                                            return $scope[controllerName][clickTarget];
                                        }

                                    }

                                });



                        }

                    });





            });
        }
    };
}

HTML:

<a premium-content to="[5]" counter="false" ng-click="sidebarCtrl.openProModal();">Senstive data</a>

1 个答案:

答案 0 :(得分:0)

$ uibModal的.open方法返回一个模态实例,该实例具有一个名为result的属性,它是一个promise。要实现这一点,您的代码应如下所示:

 var modalInstance = $uibModal.open({
    animation: true,
    backdrop: 'static',
    keyboard: false,
    templateUrl: 'template/sidebar/wizard',
    size: 'lg',
    controller: 'WizardController',
    controllerAs: 'wizardCtrl',
    resolve: {
        user: function () {
                 return user
              },
        modalName: function () {
                 return $scope[controllerName][clickTarget];
              }
     }
});

modalInstance.result.then(function() {
    // do something here
});