Question

我必须在这里遗漏一些东西。我有一个如下模块：

    (function (app) {
    'use strict';

    app.controller('modalCtrl', modalCtrl);

    modalCtrl.$inject = ['$scope', '$modalInstance'];

    function modalCtrl($scope, $modalInstance) {


        $scope.closeModal = closeModal;

        function closeModal() {
            $modalInstance.dismiss();
        }
    }

})(angular.module('mainModule'));

我从这个vew中调用了closeModal函数：

<div class="panel panel-primary">
    <div class="panel-heading">
        Heading!
    </div>
    <div class="panel-body">
        Some message.
    </div>
    <div class="panel-footer clearfix">
        <div class="pull-right">
            <button type="button" class="btn btn-danger" ng-click="closeModal()">OK</button>
        </div>
    </div>
</div>

模态按预期打开，但单击“确定”按钮无法关闭。代码开放模式如下：

function openDialog() {
    $modal.open({
        templateUrl: 'modal.html',
        controller: 'modalCtrl',
        scope: $scope
    }).result.then(function ($scope) {
       //some code here
    }, function () {

    });
}

编辑： openDialog函数与closeModal在不同的控制器中。似乎没有什么工作在下面。对我来说，似乎ng-click on closeModal没有找到它的控制器来调用closeModal，但是没有抛出错误。

Answer 1

尝试打开这样的模态：

function openDialog() {
    $modal.open({
        templateUrl: 'modal.html',
        controller: 'modalCtrl',
        scope: this.$new()
    }).result.then(function ($scope) {
       //some code here
    }, function () {

    });
}

Answer 2

首先创建模态的实例

function openDialog() {
    $scope.modal = $modal.open({
        templateUrl: 'modal.html',
        controller: 'modalCtrl',
        scope: $scope
    }).result.then(function ($scope) {
       //some code here
    }, function () {

    });
}
 function closeModal() {
            $scope.modal.dismiss();//or close();
        }

Answer 3

$scope.closeModal = function() {
    $scope.$modalInstance.dismiss('cancel');
};

Answer 4

您是否尝试使用data-dismiss="modal"属性？

Answer 5

从openDialg函数中移除范围：$ scope

function openDialog() {
    $modal.open({
        templateUrl: 'modal.html',
        controller: 'modalCtrl'
    }).result.then(function ($scope) {
       //some code here
    }, function () {

    });
}

ng-click不在模态面板angularjs v 1.3.17上触发

5 个答案: