如何开发一个按钮点击打开的弹出框（Angularjs）

任何人都可以引用链接或演示代码来使用angularjs开发弹出窗口。如何开发一个按钮点击打开的弹出框（Angularjs）

我试过下面的代码，但它不工作。

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'); 
    }; 
}]);

在下面的html中，我设置ng控制器，但它不工作。

<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>

这是给错误：

[$injector:unpr].

来源

2017-07-28 Jazil Waqar

其实你是在正确的轨道上，确保你使用的是最新的角度ui bootstrap库，并且它已经被包含在你的HTML里面了..还有请在浏览器控制台中显示完整的错误信息 – Rahul

检出https：// angular-ui .github.io/bootstrap /＃！＃模式链接。最新的ui bootstrap模式有$ uibModal – Rahul

您可以使用uibModalinstance。

按钮点击调用功能打开。开放功能

代码：

$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'); 
          }; 
         } 
        }); 
}

我已经使用这个代码删除我的纪录。你可以在你的方式使用，如果你想利用弹出的响应，你可以使用：

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

HTML模板将是这样的：

<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>

希望这将是有益的，如果您有任何进一步的查询你可以问。谢谢！

来源

2017-07-28 12:53:44

如何开发一个按钮点击打开的弹出框（Angularjs）

回答

相关问题