没有 jQuery 的弹出窗口

Question

我一直在使用 AngularStrap 和 AngularUI Bootstrap 实现弹出窗口。我可以获得这两个框架来让弹出窗口与完整的 jQuery 库一起工作，但是当我排除 jQuery 时就不行了。我知道 Angular 包含一个名为 jQlite 的 jQuery 版本，据推测这应该是实现这些其他框架所需的全部内容。这是我的问题，如果没有完整的 jQuery 库，甚至可以在 Angular 中实现弹出窗口吗？

Answer 1

ui-bootstrap homepage 的第一行指出：

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required

AngularStrap's page 也没有提到对 jQuery 的任何依赖。

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

Answer 2

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

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

我正在使用图片弹出窗口。 'image-popup' 指令放置在 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'
    }

  }
}]);

您可能希望 fiddle 使用弹出选项和样式。这是我使用的弹出模板：

<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（用于轮播），并且在两个库共享的 'tooltip' 模块上存在命名空间冲突。我从来没有弄清楚如何解决这个问题。

希望对您有所帮助，祝一切顺利。

没有 jQuery 的弹出窗口

Popovers without jQuery

angularjs

angular-ui-bootstrap

angular-strap