純CSS模式（::目標）具有角UI路由器

我移植我的網站角（我是新來的吧），並想知道如果我能在使用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的方法呢？

提前感謝！

來源

2015-09-23 Akak

如果你的模式是始終存在的，你就應該能夠使用NG-顯示控制時，它的顯示。

我通常有一個應用程序級控制，我有我的身體標記和使用ng-controller = AppController作爲應用創建它。如果您有一個名爲showModal的控制器的屬性，並將其初始化爲false，則可以在您的ui視圖的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中的一個。

來源

2015-09-23 12:32:45

純CSS模式（::目標）具有角UI路由器

回答

相關問題