创建一个模式窗口，用来加载数据angular.js [英] Creating a modal window to load data with angular.js

问题描述

我一直在试图加载使用angular.js模态窗口内的数据，但我不知道该怎么做。我需要的URL也单击链接时发生变化，数据模态窗口中加载加载一个新的页面，而不是

I've been trying to load data inside a modal window using angular.js but I'm not sure how to do that. I need the url also to change when the link is clicked and the data to load inside a modal window instead of loading a new page.

我已经使用jQuery插件Facebox试过，但它似乎没有工作，我还使用了Twitter的引导模式的组成部分。

I have tried using the jQuery Facebox plugin but it doesnt seem to work, I'm also using the twitter bootstrap modal component.

下面是我的code：

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

我要加载的＃/职位/ {{post.id}}在模式窗口。

推荐答案

如果不知道这将彻底解决你的问题，但我们对的 http://angular-ui.github.com/ 。因为你是定义在你的页面的div的，数据双向绑定应该只是工作。在问候中的URL链接改变，我不知道你为什么会想这个，因为这是一个模态控制。

Not sure if this will completely solve your problem but we have a directive wrapper of the bootstrap modal on http://angular-ui.github.com/. Because you are defining your divs in your page, the two-way data binding should just work. In regards to the url link to change, I'm not sure why you would want this since this is a modal control.

角的UI组都有一个angularjs更换看到这里的JS模态和其他一些引导控制

Angular-ui group has an angularjs replacement of the js for modal and some other bootstrap controls see here

- 丹

这篇关于创建一个模式窗口，用来加载数据angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！