如何开发一个在单击按钮时打开的弹出窗口（Angularjs）答案

【问题标题】：How can I develop a popup that open on a button click (Angularjs)如何开发一个在单击按钮时打开的弹出窗口（Angularjs）
【发布时间】：2017-07-28 11:36:26
【问题描述】：

任何人都可以向我推荐使用 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-controller 但它不起作用。

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

【问题讨论】：

其实你是在正确的轨道上，确保你使用的是最新的 Angular ui 引导库，并且它已经包含在你的 HTML 中.. 也请在浏览器控制台中发布完整的错误消息
查看angular-ui.github.io/bootstrap/#!#modal 链接。最新的 ui bootstrap modal 有 $uibModal

标签： javascript angularjs popup

【解决方案1】：

您可以使用 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');
                            };
                        }
                    });
}

我已使用此代码删除我的记录。您可以按照自己的方式使用，如果您想对 Popup 进行响应，可以使用：

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>

希望这会有所帮助，如果您有任何进一步的疑问，您可以询问。谢谢！

【讨论】：