Question

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

Answer 1

ui-bootstrap homepage州的第一行：

此存储库包含一组基于的本机AngularJS指令 Bootstrap的标记和CSS。因此，不依赖于jQuery或需要Bootstrap的JavaScript

AngularStrap's page并未提及对jQuery的任何依赖。

所以，回答你的问题，是的，你可以在没有jQuery包含在项目中的情况下实现popovers。

Answer 2

我无法使AngularUI弹出窗口工作，但是使用Angular-Strap成功了。我整理了一个可以帮助你的示例plunker。我在我的网站上使用了类似的东西。

Angular Strap popup directive (on Plunker http://embed.plnkr.co/lxL65Q/preview)

我正在使用弹出图片。＆＃39;图片弹出＆＃39;指令放在img标记中，它需要一个src属性。我需要的库是Bootstrap样式，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>

示例应用代码如下所示：

// Include a reference to ngStrap like this
var popupApp = angular.module('popupApp', ['mgcrea.ngStrap']);

// This demo doesn't really need a controller but hey.
popupApp.controller('AppCtrl', ['$scope', function($scope) {

}]);

// Directive that displays an image within an Angular Strap popup.
// This directive should only be applied to an img, as it expects a 'src' attribute.
popupApp.directive('imagePopup', ['$popover', '$compile', '$window', function($popover, $compile, $window) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var myPopover = $popover(element, {
          title: attrs.popupTitle,
          template: 'angular-strap-popover-tpl.html',
          html: true,
          trigger: 'manual',
          autoClose: true,
          transclude: true,
          scope: scope,
          animation: 'am-fade'
       });

      // Toggle the popover closed when you click it
      scope.closeMe = function() {
        myPopover.toggle();
      };

      // Toggle the popover closed when you click the original smaller image.
      element.on('click', function(element) {
        myPopover.toggle();
      });
    },

    // Isolate scope, load the popup template image's src from the src attribute of the original image
    scope: {
      popupImageSrc: '@src'
    }

  }
}]);

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

<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的弹出窗口

2 个答案: