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

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

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

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

提前致谢。

【问题讨论】:

标签: 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 都可以工作。
猜你喜欢
  • 2013-06-20
  • 2015-10-13
  • 2012-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-29
相关资源
最近更新 更多