如何消除此错误（通过选择器查找元素）答案

【问题标题】：how to remove this error (Looking up elements via selectors )如何消除此错误（通过选择器查找元素）
【发布时间】：2014-08-09 13:08:25
【问题描述】：

我正在尝试使用 Angularstap.js 制作弹出框。我从这里阅读了文档 http://mgcrea.github.io/angular-strap/##popovers 但是我的弹出窗口没有在点击时显示，你能告诉我我在哪里做错了吗？这是我的笨蛋 http://plnkr.co/edit/Cp7wrpeh8SS4oY5GGRfY?p=preview

出现错误： 错误：[jqLite:nosel] jqLite 不支持通过选择器查找元素！请参阅：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
        <script src="https://dl.dropboxusercontent.com/s/64qidru3z31h5ns/angular-strap.js"></script>

        <script src="https://dl.dropboxusercontent.com/s/meplmw59rwg2dmy/angular-strap.tpl.js?m=d"></script>

        <script src="https://dl.dropboxusercontent.com/s/qhgexynaog5ul5l/popover.js"></script>

  </head>

  <body>
<button type="button" class="btn btn-lg btn-danger" title="this" data-content="{{popover.content}}" data-template="pop.html" data-animation="am-flip-x" bs-popover>Custom Popover


</button>  </body>
<script>
  var myapp =angular.module('myApp', ['mgcrea.ngStrap']);

</script>
</html>

【问题讨论】：

plnkr 对我来说工作正常，控制台中没有任何内容，通常此消息意味着您正在使用需要 jquery 的东西并且您没有加载 jquery。如果你不加载普通的 jquery before 角度，它将使用它的内置版本 jqlite，这是非常有限的
你的 plunker 只在 Chrome 中为我工作。
好的，但是当我点击按钮时不显示弹出窗口
@runTarm 当你点击红色按钮时你看到弹出框了吗
@runTarm 在下面打败了我 :)

标签： javascript jquery angularjs angularjs-directive angular-strap

【解决方案1】：

其实文档中已经提到了template属性，但是很难注意到：

它应该是一个遵循 Bootstrap 样式约定 like this 的 div.popover 元素。

因此，您的 pop.html 应该具有相同的结构，如下所示：

<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content">
    <ul class="list-group">
        <li class="list-group-item" ng-click="hidePopover();editRowName(student)">Edit</li>
        <li class="list-group-item " ng-click="deleteRow($index)">Delete</li>
    </ul>
  </div>
</div>

Plunker 示例： http://plnkr.co/edit/sKApS5eC0NCv1PLsQKZx?p=preview

【讨论】：

谢谢你今天运行你解决了我的两个问题..因为你知道这个问题：stackoverflow.com/questions/25217933/…
我将它应用在主应用程序上。它工作 80% 正确，但有一个问题。但是当我点击侧边并生成多次时它没有隐藏的问题。你如何重现 .click添加按钮它生成一行然后再次单击它再次生成一行。单击星形按钮它显示弹出并再次单击第一个不隐藏下方的星形。plnkr.co/edit/srx5bPr2NaWkK2VkYzWT?p=preview
这是一个不同的问题。如文档中所述，默认情况下会在click 上切换弹出框。要实现您想要的，您可以将其更改为在 focus/blur 上切换并让星形图标成为焦点：plnkr.co/edit/OsSggQns3JzvzT1Wh7Js?p=preview
但是没有使用这个插件，因为当我使用 click 时我的编辑和删除功能正常工作。但是当我改变焦点时停止该功能..:( 请检查编辑和删除功能在点击而不是焦点上工作..:(
我们可以应用这个解决方案吗stackoverflow.com/questions/22020775/close-angularstrap-popover