Angular JS:隐藏/关闭模态

时间:2014-10-15 13:25:28

标签: javascript angularjs twitter-bootstrap

我在Angular JS中关闭Modal时面临问题

HTML

   <div class="container">
        <div class="col-md-12" id="gridSet">
            <div class="gridStyle adjustViewPort" ng-grid="gridOptions"></div>

            // Here is the HTML template for MODAL.

            <script type="text/ng-template" id="myModalContent.html">
                <div class="modal-body">
                <p>No Events Found</p>
                <p><button class="btn btn-primary"  ng-click="myClickEvent()">OK</button></p>
                </div>
            </script>
        </div>

  </div>

controller.js 看起来像

$scope.modalInstance=$modal.open({templateUrl: 'myModalContent.html'});

//This should run. But, every time only Cancelled is logged.
$scope.modalInstance.result.then(function() {
                    console.log('Success'); // This is never executed.
                    }, function() {
                    console.log('Cancelled');
                    })['finally'](function(){
                    $scope.modalInstance = undefined  
                    });

我试图在this.$hide();中隐藏myClickEvent的模态但是,根本没有调用该函数。

我复制代码的Plunker代码。

寻找1)使用$timeout几秒后隐藏模态             2)当用户选择OK时关闭模态。

更新

问题是Plunker中的代码显示$modalInstance作为依赖,我无法注入。

功能&#39; ng-click =&#34; myClickEvent()&#34;&#39;在控制器中调用一个函数,如下所示。

$scope.myClickEvent=function(){
     alert('the function is called.');
}

但是,没有警报。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

使用close()方法:

 $scope.close = function () {
        $modalInstance.close();
    };
<button class="btn btn-warning" ng-click="close()">Close</button>