[英]ng-click event with a promise
我有一個有角度的應用程序,基本上有一個指令,該指令根據用戶的類型顯示內容,以防萬一您的accountType是免費的,它是您的向導模式,可以為您提供一些促銷信息,但是如果您的accounType不免費或專業人士可以觸發ng-click事件並顯示您授權查看的模式。
但是有一個問題,我相信,由於我需要做出承諾以獲取用戶的當前accounType,並且比提供正確的信息要晚一些,因此會觸發兩種模型。 我認為沒有顯示一個模式,而是因為evt.stopProgation ...處於promise之內。
這是我的代碼:指令:
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>
$ uibModal的.open方法返回一個模式實例,該實例具有名為result的屬性,這是一個承諾。 要實現這一點,您的代碼應如下所示:
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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.