angularjs - Angular Modal - 关闭/关闭模式

标签 angularjs angular-ui-bootstrap bootstrap-modal

我是 Angular 的新手,正在尝试实现模态。关闭/关闭模式时出现问题 - 当我单击取消按钮时,没有任何 react 。
这是 Controller 代码:

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

这是实际模态的模板 View
<!-- 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>

即使单击模态框右上角的十字也不会关闭模态框。有任何想法吗?谢谢:)

最佳答案

应该不是 ng-click="cancel()"而不是 ngclick ?

另外我不认为范围绑定(bind)到 Controller ,我没有测试过这个,但我相信你需要更多的选择:

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

然后只需更新您的模板:
ng-click="$mCtrl.cancel()"

关于angularjs - Angular Modal - 关闭/关闭模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37288794/

相关文章:

javascript - UI-Router 和解析, Controller 中的未知提供程序

javascript - 移动网站的滚动助手

angularjs - 使用 Angular UI Bootstrap 在动态创建的选项卡上设置事件选项卡

javascript - Bootstrap 模式适用于内页,但不适用于主页

angularjs - 使用来自任何父级的 ui-router 的模态对话框,如何正确指定状态?

javascript - NG- Bootstrap : open multiple modals in separate components from one click handler

javascript - 如何使用 $watch 稳定的方式

angularjs - Angular 验证不起作用

angularjs - ui.bootstrap 模式加载 html 但不显示任何内容

javascript - 带有 Ng-repeat 和静态选项卡的 ui-tab