Twitter的引导酥料饼不angularjs工作 [英] twitter bootstrap popover doesn't work with angularjs

问题描述

我是想，当我发现，当它被置于下方的＆LT它不起作用使用Twitter引导酥料饼在我的网页; DIV＆GT; 与 NG-重复。它工作正常，在一个div类，并不包含在顶部纳克 - 有谁知道为什么会发生，我怎么能解决这个问题？

 ＆LT; H3＆GT;学生没有团队及LT; / H3 GT＆;
 ＆LT; D​​IV CLASS =手风琴ID =studentNoTeamAccordion＆GT;
         ＆LT; A HREF =＃类=BTN BTN-大BTN-小学的rel =酥料饼数据的HTML =真
            数据内容=
               ＆LT;形式为GT;
                   ＆LT; TextArea类='输入XLARGE行= '12'类型='文本'＆GT;＆LT; / textarea的＆GT;
                   ＆所述;差异无显着
                      ＆LT;输入类='BTN BTN-主类型=提交值=发送/＆GT;
               ＆LT; /形式为GT;
            数据放置=正确的数据原标题=查询＆GT;发送查询
        ＆所述; / A＆GT;
  ＆LT; D​​IV CLASS =的手风琴组NG重复=（键，VAL）在stud_finding＆GT;＆LT;
      ＆LT; A HREF =＃类=BTN BTN-大BTN-小学的rel =酥料饼数据的HTML =真
         数据内容=
               ＆LT;形式为GT;
                   ＆LT; TextArea类='输入XLARGE行= '12'类型='文本'＆GT;＆LT; / textarea的＆GT;
                   ＆所述;差异无显着
                       ＆LT;输入类='BTN BTN-主类型=提交值=发送/＆GT;
               ＆LT; /形式为GT;
 

解决方案

我不明白为什么这个问题得到了下投票。它是如何理解的角度范围的原则，一个很好的例子。作用域基本上是连接到一个DOM元素。所有的控制器，重复等，将只在此DOM元素（范围）工作。当自举创建酥料饼，它会创建一个新的DOM元素，并将其追加到身体，所以现在是出的范围（这是不是在元素的任何更多）。这是一个关键的功能，了解有关棱角分明。

幸运的是，引导有解决方案。酥料饼有一个容器选项，可以让你的酥料饼追加到特定的元素，而不是身体。放在那里有角控制器的DOM元素的jQuery选择。 <一href=\"http://twitter.github.io/bootstrap/javascript.html#popovers\">http://twitter.github.io/bootstrap/javascript.html#popovers （见选项）

I was trying to use twitter bootstrap popover on my webpage when I discover that it doesn't work when it is placed below a <div> with ng-repeat. It works fine at the top within a div class that doesn't contain ng- does anyone know why did it happen and how can I work around the issue?

<h3>Students Without Team</h3>
 <div class="accordion" id="studentNoTeamAccordion" >
         <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
            data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea>  
                   <P>
                      <input class='btn btn-primary' type='submit' value='Send' />
               </form>"
            data-placement="right" data-original-title="Enquiries">Send Enquiries
        </a>
  <div class="accordion-group" ng-repeat="(key,val) in stud_finding"><
      <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
         data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea> 
                   <P>
                       <input class='btn btn-primary' type='submit' value='Send' />
               </form>"

解决方案

I don't see why this question got down-voted. It's a good example on how to understand the principle of scopes in angular. A scope is basically attached to a DOM element. All the controllers, repeats, etc. will only work in this DOM element (the scope). When Boostrap creates a popover, it creates a new DOM element and appends it to body, so now it's out of the scope (it is not in the element any more). That's a key feature to understand about Angular.

Luckily, Bootstrap has the solution. Popover has a container option that lets you append the popover to a specific element instead of body. Put there the jQuery selector of the DOM element that has the angular controller. http://twitter.github.io/bootstrap/javascript.html#popovers (see Options)

这篇关于Twitter的引导酥料饼不angularjs工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！