Question

我是Angular的新手，并试图实现一个模态。关闭/解除模态时遇到问题 - 当我单击取消按钮时，没有任何反应。这是控制器代码：

angular.module('navApp')
    // Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
        $scope.title = "Hello, Angm-Generator!";
        $scope.open = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalCtrl'
            });
        };
    }])

    .controller('ModalCtrl', function ($scope, $uibModalInstance) {
        // Added some content to Modal using $scope
        $scope.content = "ModalCtrl, Yeah!"
        // Add cancel button
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    })

，这是实际模态的模板视图

<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <button type="button" class="close" datadismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Hello from Modal!</h3>
    </div>
    <div class="modal-body">
        Modal Content from: <b>{{ content }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ngclick="cancel()">Cancel</button>
    </div>
</script>

即使单击模态右上角的十字也不会关闭模态。有任何想法吗？感谢：）

Answer 1

不应该是ng-click =＆＃34;取消（）＆＃34;而不是 ngclick ？

此外，我不认为范围与控制器有关，我还没有对此进行测试，但我相信您还需要更多选择：

var modalInstance = $uibModal.open({
   templateUrl: 'myModalContent.html',
   controller: 'ModalCtrl',
   controllerAs: '$mCtrl',
   bindToController: true
});

然后只需更新您的模板：

ng-click="$mCtrl.cancel()"

Answer 2

您是否尝试过$ uibModalInstance.close（）？

您可以做的另一件事是

 $scope.open = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalCtrl'
        });
        modalInstance.result.then(function successCallBack() {
            modalInstance.close()
         }, function errorCallBack() {
            modalInstance.close()
        })
    };`

Answer 3

如果要关闭模型，请单击横杆，然后使用

<button type="button" class="close" data-dismiss="modal">&times;</button>

这将是按钮，data-dismiss="modal"将关闭你的模态。

角度模态 - 关闭/解雇模态

3 个答案: