Invoking modal window in AngularJS Bootstrap UI using JavaScript

前端 未结 6 1287
别那么骄傲
别那么骄傲 2020-11-29 16:25

Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button?

I am new to AngularJS and tried searching the docu

6条回答
  •  佛祖请我去吃肉
    2020-11-29 17:00

    Open modal windows with passing data to dialog

    In case if someone interests to pass data to dialog:

    app.controller('ModalCtrl', function($scope,  $modal) {
          
          $scope.name = 'theNameHasBeenPassed';
    
          $scope.showModal = function() {
            
            $scope.opts = {
            backdrop: true,
            backdropClick: true,
            dialogFade: false,
            keyboard: true,
            templateUrl : 'modalContent.html',
            controller : ModalInstanceCtrl,
            resolve: {} // empty storage
              };
              
            
            $scope.opts.resolve.item = function() {
                return angular.copy(
                                    {name: $scope.name}
                              ); // pass name to resolve storage
            }
            
              var modalInstance = $modal.open($scope.opts);
              
              modalInstance.result.then(function(){
                //on ok button press 
              },function(){
                //on cancel button press
                console.log("Modal Closed");
              });
          };                   
    })
    
    var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
        
         $scope.item = item;
        
          $scope.ok = function () {
            $modalInstance.close();
          };
          
          $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
          };
    }
    

    Demo Plunker

提交回复
热议问题