ngDialog - 如何从模板关闭对话框（即没有控制器功能）？答案

【问题标题】：ngDialog - how to close dialog from the template (i.e. no controller functions)?ngDialog - 如何从模板关闭对话框（即没有控制器功能）？
【发布时间】：2016-06-02 13:00:06
【问题描述】：

在 ngDialog (https://github.com/likeastore/ngDialog) 上，是否有内置方法可以从它自己的模板中关闭对话框？ IE。所以我不需要控制器中的任何函数来调用对话框？

这是我的模板（errorPopup.html）：

<div>
  <div class="alert alert-warning">
    <div class="errorLogo"><i class="icon-exclaim"></i></div>
    <div class="errorContent" data-ng-bind-html="errorMessage"></div>
  </div>
  <div class="buttonWrapper">
    <button type="button" class="btn-primary pull-right">
      <span res="close"></span>
    </button>
  </div>
</div>

这就是我打开对话框的方式：

function showErrorPopup() {
  ngDialog.open({
    template: 'errorPopup.html',
    scope: $scope,
    className: 'ngdialog-theme-default ngdialog-cart-theme',
    showClose: true,
    appendTo: 'div[ui-view]',
    closeByDocument: false
  });
}

因此，当我调用 showErrorPopup() 时，会显示一个对话框，但是，我需要使这个“关闭”按钮真正关闭/关闭弹出窗口。到目前为止，这只是一个计划按钮，没有任何作用。

我可以在模板级别（不更改控制器的代码）做些什么来使按钮工作吗？

也许我应该使用默认按钮而不是我自己的？如果有，怎么做？

PS：我注意到点击右上角的 X 按钮有效，弹出窗口被关闭。

谢谢大家！

【问题讨论】：

它关闭了窗口，但感觉不对。那会是什么感觉呢？
@AlonEitan 我已经改写了我的问题，我想做的就是弄清楚如何从模板中关闭对话框（控制器中没有函数）
所以只需在控制器中执行$scope.ngDialog = ngDialog;，并在视图中执行ng-click="ngDialog.close()"
@AlonEitan 实际上这是一个不错的主意！可能想将其发布为 asnwer :D
感谢您的确认。我已经发布了我的评论作为答案

标签： angularjs ng-dialog

【解决方案1】：

您不必在 $scope 中注入 ngDialog 模块。您可以直接在弹出模板中调用 closeThisDialog() 函数：

<button ng-click="closeThisDialog(0)">Close</button>

函数参数是解析弹出窗口的值。

【讨论】：

【解决方案2】：

如果你想直接从视图调用ngDialog 的关闭函数，你必须将模块本身注入到控制器内部的作用域中，以便它在视图中可用：

$scope.ngDialog = ngDialog;

然后，您可以直接在视图中使用它：

<button ng-click="ngDialog.close()">Close</button>

【讨论】：

【解决方案3】：

在您粘贴一些控制器和 app.js 以及 HTML 代码内容之前，很难说出您到底做错了什么。 是的，ngDialog 内置了关闭对话框的方式

确保将 className 设置为 'ngdialog-theme-flat ngdialog-theme-custom' 或其他 css 类，如 open function 中的文档中所述。

【讨论】：

【解决方案4】：

您已添加名称为 "closeThisDialog" 的处理程序，但函数有另一个名称 "closePopup"。

也许是你的问题。

【讨论】：

谢谢，但您可能只是对我的问题感到困惑。我已经改写它以避免这种确切的混淆：D

【解决方案5】：

只需按照以下步骤操作 1.创建应用时

var app = angular.module('sampleApp', ['ngDialog']);
2.使用这样的按钮

<button ng-click="clickMe()">Click to Open</button>

3.把它放在你的控制器中

 `$scope.clickMe = function () {
    ngDialog.open();
};`

默认情况下它有关闭代码，当你点击关闭时它会自动关闭。希望对你有用

【讨论】：

这正是我想要避免的。我遇到的问题是我在多个页面上重用模板，这意味着我必须在我的每个控制器上都有这个 clickMe 功能......