javascript - 带有 Angular ui-router 的纯 CSS 模态 (::target)

Question

我的第一个问题:)

我正在将我的网站移植到 Angular(我是新手)，想知道在使用 ui-router 的同时我是否能够保留我的纯 CSS 模式对话框。在 HTML 中它看起来像这样:

<a id="footerMail" href="#openContact"></a>
<div id="openContact" class="modal">
<div class="modal__container">
    <a href="#close" title="Close" class="modal__close">X</a>
    <form class="contact-form" action="/" enctype="application/x-www-form-urlencoded" method="post">
    </form>
</div>

它在 openContact id 上使用 ::target。但是，当我在使用 ui-router 时尝试这样做时，显然不允许该路径发生，因为它未定义为状态。我应该如何定义它，因为我不想重定向到一个新的 URL，只是打开一个覆盖当前状态的模式？我的 $stateProvider 看起来像这样:

$urlRouterProvider.otherwise("/site/editor");
$stateProvider
  .state('site', {
     url: "/site",
     abstract: true,
     templateUrl: "partials/site.html",
     controller: 'MainController as ctrl'
  })
  .state('site.director', {
     url: "/director",
     templateUrl: "partials/gallery.html",
     controller: 'GalleryController'
  })
  .state('site.editor', {
     url: "/editor",
     templateUrl: "partials/gallery.html",
     controller: 'GalleryController'
  });
});

链接和模态代码最好从主“站点”状态触发，因为它对所有子页面都很常见。或者这可能工作量太大，我应该重写它而不是使用 CSS 方法？

提前致谢!

Answer 1

如果您的模式始终存在，您应该能够使用 ng-show 来控制它何时显示。

我通常在我的 body 标签上有一个应用程序级别的控件，并使用 ng-controller=AppController 之类的东西创建它作为应用程序。如果你有一个名为 showModal 的 Controller 属性，你初始化为 false，你可以在你的 ui-view 的 div 之外创建你的模态，然后在你想要显示的任何链接中有 ng-show="app.ShowModal"您从其 ng-click 调用的函数中的模式将 app.showModal 设置为 false。

不过，Angular 中有很多用于模态的好方法。我一直在使用 Angular Material 的 mdDialog 和这个:http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm也不错。我也使用了 UI Bootstrap 中的那个。