12

AngularJS を使用してモーダル ウィンドウ内にデータを読み込もうとしましたが、その方法がわかりません。リンクがクリックされたときにURLも変更し、新しいページをロードする代わりにモーダルウィンドウ内にデータをロードする必要があります。

jQuery Facebox プラグインを使用してみましたが、うまくいかないようです。Twitter ブートストラップ モーダル コンポーネントも使用しています。

以下は私のコードです：

<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}}"モーダルウィンドウにロードしたい。

4

4 に答える 4

7

これで問題が完全に解決するかどうかはわかりませんが、http://angular-ui.github.com/にブートストラップ モーダルのディレクティブ ラッパーがあります。ページで div を定義しているため、双方向のデータ バインディングが機能するはずです。変更する URL リンクに関しては、これがモーダル コントロールであるため、なぜこれが必要なのかわかりません。

Angular-ui グループには、モーダルおよび他のいくつかのブートストラップ コントロール用の js の angularjs 置換があります。こちらを参照してください。

――段

于 2012-07-26T21:07:46.887 に答える
4

たまたまTwitter BootStrapのモーダルを使用している場合、この jsfiddleは Angular コンポーネントを分離したままにします。これにより、モーダルの html と適切にスコープされたバインディングのみを含む部分的な html ファイルを作成できます。

これは、HTML で宣言的にAngular ディレクティブを使用できることを意味します。

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

編集: @DanDoyon の (正しい) コメントに従って、ディレクティブの名前がng名前空間以外に変更されました。 更新: Angular 1.x でBootstrap 3 モーダルを使用すると、カスタム ディレクティブまたはangular-ui モーダルがほとんど不要になります。

于 2012-10-31T22:50:32.337 に答える
2

これが私のディレクティブを作成する試みです。

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

うまくいけば、それが役に立つと思います。

于 2012-08-18T05:20:47.540 に答える