Angularjs 没有jQuery的popover_Angularjs_Angular Ui Bootstrap_Angular Strap

Angularjs 没有jQuery的popover

angularjs

Angularjs 没有jQuery的popover,angularjs,angular-ui-bootstrap,angular-strap,Angularjs,Angular Ui Bootstrap,Angular Strap,我一直在用AngularStrap和AngularUI引导实现Popover。我可以让这两个框架使弹出窗口与完整的jQuery库一起工作，但在排除jQuery时不行。我知道Angular包含了一个名为jQlite的jQuery版本，据推测，这就是实现这些其他框架所需的全部内容。我的问题是，在没有完整的jQuery库的情况下，是否可以在Angular中实现Popover？第一行状态：此存储库包含一组基于 Bootstrap的标记和CSS。因此，不依赖于jQuery或 Bootstrap的Java

我一直在用AngularStrap和AngularUI引导实现Popover。我可以让这两个框架使弹出窗口与完整的jQuery库一起工作，但在排除jQuery时不行。我知道Angular包含了一个名为jQlite的jQuery版本，据推测，这就是实现这些其他框架所需的全部内容。我的问题是，在没有完整的jQuery库的情况下，是否可以在Angular中实现Popover？

第一行状态：

此存储库包含一组基于 Bootstrap的标记和CSS。因此，不依赖于jQuery或 Bootstrap的JavaScript是必需的

也没有提到对jQuery的任何依赖性

因此，为了回答您的问题，是的，您可以在项目中不包含jQuery的情况下实现弹出窗口。

我也无法使AngularUI弹出窗口正常工作，但AngularStrap成功实现了。我举了一个例子，可能会帮助你。我在我的网站上使用了类似的东西

我正在使用图像弹出窗口。“image popup”指令放在img标记中，它需要一个src属性。我需要的库是引导样式、Angular JS以及Angular Strap脚本和模板文件

<!DOCTYPE html>
<html ng-app="popupApp" ng-controller="AppCtrl">

<head>
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script src="//cdn.rawgit.com/mgcrea/angular-strap/v2.1.3/dist/angular-strap.js" data-semver="2.1.3" data-require="angular-strap@2.1.3"></script>
<script src="//cdn.rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.tpl.js" data-semver="2.1.3" data-require="angular-strap@2.1.3"></script>
<script src="app.js"></script>
</head>

<body>
<h1>Using Angular JS and Angular-Strap to create a popup image viewer</h1>
<figure class="col-sm-4">
  <img image-popup alt="lolcat" class="img-popup-source" src="http://obeythekitty.com/wp-content/uploads/2015/01/lolcat_flying_cat.jpg" />
  <figcaption>Leaping Lolcats!</figcaption>
</figure>
</body>

</html>

您可能想要摆弄弹出选项和样式。以下是我使用的弹出式模板：

<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content" ng-click="closeMe()"><img ng-src="{{popupImageSrc}}"></div>
</div>

Angular Strap的组件对我来说效果很好，它们有一个构建器，可以让你将所需的组件组装在一起。不过，在我的网站上测试这个指令时，我确实遇到了一个挑战。我还使用AngularUI（用于旋转木马），在两个库共享的“工具提示”模块上出现名称空间冲突。我从来没有想过如何解决这个问题

我希望这是非常有帮助的。

没有任何理由认为没有jQuery任何事情都是不可能的，因为没有任何额外帮助程序库的纯JavaScript编写效率不高，但应该总是足够的。比如说，这里有一个库（15秒搜索），它不依赖jQuery显示。不知道jQLite在什么时候有用或者没有用。不太明白这个问题-看看angularstrap的文档，这里是官方的Popover->示例。。。没有jQuery。

<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content" ng-click="closeMe()"><img ng-src="{{popupImageSrc}}"></div>
</div>