带有 angular.js 的模态视图答案

【问题标题】：modal views with angular.js带有 angular.js 的模态视图
【发布时间】：2013-09-19 01:36:58
【问题描述】：

我想创建一个带角度的模态视图，但我在网上找不到任何资源。谁能指出我正确的方向？

我所说的模态视图就像在 facebook 上单击照片时一样：它将在页面顶部打开，因此在背景中单击将返回主视图。

当然，我不是在寻找关于如何实现灯箱效果的 css 细节。

提前致谢。

【问题讨论】：

指令怎么样？
如果你使用 Bootstrap，你可以使用angular-ui.github.io/bootstrap

标签： angularjs

【解决方案1】：

从 ui-bootstrap 查看这个开源模式（在 AngularJS 中）。它通过指令利用模块化的优势，并涵盖了许多可用性特性。这将是构建可重用解决方案的一个很好的参考点，即使没有 Bootstrap CSS。 https://github.com/angular-ui/bootstrap/tree/master/src/modal

【讨论】：

不使用bootstrap会出问题！
需要注意的重要部分是上面链接中的modal.js文件。此文件包含一个经过测试的解决方案，可用于您站点周围的可重用模式。熟悉此代码。它将在您自己构建时提供有用的参考。无需重新发明轮子。

【解决方案2】：

在尝试了各种选项（包括 Angular-UI-bootstrap 模态）之后，我找到了一个非常令人满意的自定义解决方案，它提供了您希望从模态中获得的所有功能：

<div class="myBackdrop" ng-show="flag.modalOpen" ng-click="closeModal()"></div>
<div class="myModal" ng-show="flag.modalOpen">
  ...
</div>

在哪里

// just a boolean flag
$scope.flag = {
  modalOpen: false
}

$scope.closeModal = function() {
  // optionally do something beforehand
  $scope.flag.modalOpen = false;
}

那么您只需要.myBackdrop 和.myModal 的CSS

【讨论】：

相当不错的解决方案，不需要引导程序！有没有办法将它与路线结合起来？所以它可以有状态，也可以保存为书签？

【解决方案3】：

您可以使用http://angular-ui.github.io/bootstrap 获得全面的解决方案。

您也可以在模态元素上使用ng-show 自己构建简单的解决方案:-)

【讨论】：

不使用bootstrap会有问题！
您实际上可以覆盖引导项目上的模板，并使其使用您想要的任何 CSS。这就是该项目的“哲学”——默认情况下是引导程序，但逻辑不与 DOM 布局耦合，因此任何 css 都可以工作。