創建一個模態窗口來使用AngularJS加載數據

我一直在嘗試使用AngularJS加載模態窗口中的數據，但我不知道該怎麼做。當鏈接被點擊時，我需要url也可以改變，並且在模態窗口中加載數據而不是加載新頁面。創建一個模態窗口來使用AngularJS加載數據

我試過使用jQuery Facebox插件，但它似乎不起作用，我也使用twitter bootstrap模式組件。

下面是我的代碼：

<div class="subnav span12" id="post-main-container" ng-controller="PostsController"> 
    <div class="btn-group pull-left span5" id="sort-nav"> 
    <a class="btn active">Popular</a> 
    <a class="btn">Recent</a> 
    <a class="btn">Favorite</a> 
    </div> 
    <div class="btn-group pull-right " id="view-nav"> 
    <a class="btn" id="2col"><i class="icon-th-large"></i></a> 
    <a class="btn active" id="4col"><i class="icon-th"></i></a> 
    <a class="btn" id="6col"><i class="icon-th-list"></i></a> 
    </div> 
    <div class="btn-group pull-right"> 
    <a id="reload" class="btn"><i class="icon-refresh"></i></a> 
    <a class="btn"><i class="icon-random"></i></a> 
    </div> 
    <div class="row-fluid span12" id="img-container"> 
    <ul class="unstyled" id="image-container"> 
     <li class="post-container box2" ng-repeat="post in posts"> 
     <div class="post-btns" style="display:none;"> 
      <a class="btn btn-mini" href="#">Share</a> 
      <a class="btn btn-mini" href="#">Add</a> 
     </div> 
     <a href="#/posts/{{post.id}}"> 
      <img ng-src="{{post.image}}"> 
     </a> 
     <p class="post-snippet" style="display:none;">{{post.description}}</p> 
     </li> 
    </ul> 
    </div> 
</div>

我要加載的"#/posts/{{post.id}}"在一個模態窗口。

來源

2012-06-25 hilarl

不知道這是否能完全解決您的問題，但我們有一個指導性的http://angular-ui.github.com/引導模式包裝。由於您在頁面中定義了div，所以雙向數據綁定應該可以正常工作。關於url鏈接的改變，我不確定爲什麼你會想要這個，因爲這是一個模態控制。

角UI組都有一個angularjs更換JS模態和其他一些引導控制看here

--Dan

來源

2012-07-26 21:07:46

爲什麼你不想讓一個深層鏈接直接進入模態？Trello.com執行此操作並且非常有用。 – Riko

Modals，以及modals。根據我的經驗，根據用戶的行爲顯示模式。我知道一個使用案例，我已經使用過，那就是身份驗證，即使這樣，模式也會根據用戶進入未經身份驗證的頁面的行爲來顯示。在網絡標準的狂野世界中變化相當快。我會看看Trello.com –

該角的方法是觀望的模型，你改變模型的：

將對話框放入標記中。
將對話內容綁定到類似selectedPost的東西。
點擊鏈接只改變selectedPost並隱藏/顯示對話框。

這裏是一個非常快的版本： http://plnkr.co/edit/0fsRUp?p=preview

結帳Angular UI，他們已經爲引導的模式的組成部分。

來源

2012-08-03 01:00:12 Vojta

我認爲你的plunkr已經死了。 – jcollum

這是我爲它做出指示的嘗試。

http://jsfiddle.net/tadchristiansen/gt92r/

希望你覺得它有用。

來源

2012-08-18 05:20:47 testing123

如果你碰巧使用Twitter BootStrap的模態，this jsfiddle保持Angular組件分開，它允許你創建一個只有你的模態html和適當範圍的綁定的部分html文件。

這意味着你可以在你的HTML使用Angular directive聲明：

<a my-popup-directive="partials/myModal.html">Open MyModal</a>

編輯：每@ DanDoyon的（正確的）意見，該指令被重命名爲一個非ng命名空間。更新：在Angular 1.x中使用Bootstrap 3 modal幾乎不需要使用自定義指令或angular-ui modal。

來源

2012-10-31 22:50:32

爲了讓讀者清楚，ng-popup不是一個角度指令。對ng命名空間使用ng並不正確，但暗示它來自核心庫。 –

我已經採取了這個版本，並正在建設它：https://github.com/clouddueling/angularjs-modals –

小提琴不起作用 –

創建一個模態窗口來使用AngularJS加載數據

回答

相關問題