Comment puis-je développer un popup qui s'ouvre sur un clic de clic (Angularjs)

Question

Tout le monde peut me référer un lien ou une démo de code pour développer une popup en utilisant angularjs.

J'ai essayé le code suivant mais cela ne fonctionne pas.

var myApp = angular.module('myApp', ['ngRoute', 'ngMap', 'ui.bootstrap']); 

myApp.config(function($routeProvider, $locationProvider) { 
    $locationProvider.hashPrefix(''); 
    $routeProvider 
     .when("/", { 
      templateUrl: "views/home.php", 
      controller: 'PopupDemoCont' 
     }) 
     .when("/profile.php", { 
      templateUrl: "views/profile.php" 

     }) 
     .otherwise({ 
      redirectTo: "/" 
     }); 
}); 

myApp.controller("ImageController", ["$scope", function($scope) { 

    $scope.logoimage = "images/logo.png"; 
    $scope.bgtextimage = "images/bgtextimage.png"; 

}]); 

myApp.controller("PopupDemoCont", ["$scope", "$modal", function($scope, $modal) { 
    $scope.open = function() { 
     console.log('opening pop up'); 
     var modalInstance = $modal.open({ 
      templateUrl: 'views/popup.php', 
      controller: 'PopupCont' 
     }); 
    }; 
}]); 

myApp.controller("PopupCont", ["$scope", "$modalInstance", function($scope, $modalInstance) { 
    $scope.close = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]); 

Dans le code html ci-dessous, j'ai défini ng-controller mais cela ne fonctionne pas.

<div class="book_div"> 
    <div class="book_content"> 
     <p id="book-text">Facing Immigration 
      <br> Problems? 
     </p> 
     <p>Helpful Guid To Navigate Your Case</p> 
     <div class="hidden-sm hidden-xs"><img ng-src="{}" class="center-block img-responsive"> 
     </div> 
     <a class="submit-button book_btn" ng-click="open()">Free download</a> 
    </div> 
</div> 

Il donne l'erreur:

[$injector:unpr].

Answer 1

Vous pouvez utiliser uibModalinstance.

Sur le bouton, cliquez sur appelez la fonction ouverte. Code

pour la fonction ouverte:

$scope.open = function(uuid,name){ 
var instance = $uibModal.open({ 
         animation: $scope.animationsEnabled, 
         templateUrl: 'common/common/partials/delete- 
             confirm.tpl.html', 
         controller: function ($uibModalInstance, 
               $scope) { 
          $scope.name = Name; 
          $scope.icon = "fa-cogs"; 
          $scope.description = "Yo have opened uib 
           Popup" 
          $scope.delete = function() {         
          $uibModalInstance.close($scope.deleteValue); 
          }; 

          $scope.cancel = function() { 
           $uibModalInstance.dismiss('cancel'); 
          }; 
         } 
        }); 
} 

J'ai utilisé ce code pour la suppression de mon dossier. Vous pouvez utiliser votre chemin, si vous voulez prendre réponse de Popup vous pouvez utiliser:

instance.result.then(function (option) { 
// Your code here    
        }, function() { 
         console.log('Modal dismissed at: ' + new Date()); 
        }); 

modèle HTML sera comme:

<div class="modal-header gray_background"> 
      <h4><b>Permanently Delete - <i class="fa {{icon}} folderIcon" aria-hidden="true"></i> {{name}} </b></h4> 
     </div> 
     <div class="modal-body"> 
      <span data-ng-bind-html="description"></span> 

      <center style="margin-top: 10px;"> 
       <div>Type "delete" to confirm 
        <input type="text" class="input" ng-model="deleteValue" required /> 
       </div> 
      </center> 
     </div> 
     <div class="modal-footer gray_background"> 
      <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button> 
      <button class="btn btn-danger" type="button" ng-click="delete()">Delete</button> 
     </div> 

Espérons que cela serait utile, si vous avez d'autres requête, vous pouvez demander. Merci!