Tạo cửa sổ phương thức để tải dữ liệu với AngularJS

Question

Tôi đã cố gắng tải dữ liệu bên trong một cửa sổ phương thức bằng AngularJS nhưng tôi không chắc chắn cách thực hiện điều đó. Tôi cần url cũng thay đổi khi liên kết được nhấp và dữ liệu tải bên trong cửa sổ phương thức thay vì tải trang mới.

Tôi đã thử sử dụng plugin jQuery Facebox nhưng dường như không hoạt động, tôi cũng đang sử dụng thành phần phương thức khởi động twitter.

Dưới đây là mã của tôi:

<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> 

Tôi muốn tải các "#/posts/{{post.id}}" trong một cửa sổ phương thức.

Answer 1

Không chắc chắn nếu điều này hoàn toàn sẽ giải quyết vấn đề của bạn nhưng chúng tôi có một trình bao bọc chỉ thị của phương thức bootstrap trên http://angular-ui.github.com/. Bởi vì bạn đang xác định divs của bạn trong trang của bạn, các ràng buộc dữ liệu hai chiều chỉ nên làm việc. Liên quan đến các liên kết url để thay đổi, tôi không chắc chắn lý do tại sao bạn sẽ muốn điều này vì đây là một điều khiển phương thức.

nhóm kiễu góc-ui có một sự thay thế angularjs của js cho phương thức và một số điều khiển bootstrap khác nhìn thấy here

--dan

Answer 2

Cách kiễu góc được xem xem mô hình và bạn thay đổi mô hình:

• Đặt hộp thoại vào đánh dấu.
• Nội dung liên kết của hộp thoại với nội dung như selectedPost.
• Nhấp vào liên kết chỉ thay đổi selectedPost và ẩn/hiện hộp thoại.

Đây là một phiên bản rất nhanh chóng: http://plnkr.co/edit/0fsRUp?p=preview

Thanh toán Angular UI, họ đã có một thành phần cho phương thức Bootstrap của.

Answer 3

Đây là nỗ lực của tôi để đưa ra chỉ thị cho nó.

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

Hy vọng bạn thấy nó hữu ích.

Answer 4

Nếu bạn tình cờ sử dụng phương thức Twitter BootStrap, this jsfiddle giữ riêng các thành phần Góc, cho phép bạn tạo một tệp html một phần chỉ với html của phương thức và các kết buộc có phạm vi phù hợp.

Điều này có nghĩa bạn có thể sử dụng một Angular directive khai báo trong html của bạn:

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

Sửa: mỗi @ DanDoyon của (đúng) bình luận, chỉ thị được đổi tên thành một ng namespace phi. Cập nhật: Sử dụng Bootstrap 3 modal với Góc 1.x làm cho chỉ thị tùy chỉnh hoặc angular-ui modal khá nhiều không cần thiết.