AngularJS - 关闭模态功能不起作用

Question

我使用ui.bootstrap创建了一个简单的弹出窗口，但我似乎无法使OK和CLOSE按钮起作用。我在这个示例代码中缺少什么？

以下是plunkr

的示例代码

谢谢

**添加了精确的代码图片

Answer 1

close和dismiss是$modalInstance返回的$modal.open对象的方法：

$scope.open = function() {
    $scope.$modalInstance = $modal.open({
        scope: $scope,
        templateUrl: "modalContent.html",
        size: '',
    })
};

$scope.ok = function() {
    $scope.$modalInstance.close();
};

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

您的代码还有一个问题是您需要在模态配置中指定scope: $scope。如果您希望模态模板中的范围是您定义ok/cancel方法的子范围，则必须这样做。

修正了演示：http://plnkr.co/edit/Y5s4yPm1TZB8S9nfO5CA?p=preview

Answer 2

我使用工作版本

更新了您的代码

http://plnkr.co/edit/iM5o0le3OioqxHBNF3d1?p=preview

您的代码存在一些问题。

$ modal是一个工厂，你不能调用$ modal.close（）

您需要执行以下操作：

 this.modal = $modal(....)

 this.modal.close();

尽管如此，即使您在控制器中执行此操作，您的模态视图也无法访问范围。

我提供的分叉插头中的解决方案是使用

  ng-click="$parent.$close()"

Answer 3

有几种方法，如前所述，它取决于您需要使用它的上下文。

例如，如果模态只是一个通知，那么就不需要使用OK或CANCEL按钮的功能，只需在按钮的ng-click中使用$ dismiss（）或$ close（）即可。在modalContent.html文件中就足够了。

这里还有一个更新的plunker

http://plnkr.co/edit/OfCGJX?p=preview

<div class="modal-footer">
    <button class="btn btn-primary" ng-click="$close()">OK</button>
    <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>