Question

任何人都可以使用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>

它给出错误：

[$注射器：unpr]。

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

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

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

1 个答案: