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'
  });
});

理想情况下，链接和模态代码将从主网站＆＃34;因为它对所有子页面都很常见。或许这太多了，我应该重写它而不是使用CSS方法？

提前致谢！

Answer 1

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

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

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

带有角度ui路由器的纯CSS模态（:: target）

1 个答案: