CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-strap
UltraSonja
UltraSonja

Reputation: 891

Popovers without jQuery

I've been implementing popovers with AngularStrap and AngularUI Bootstrap. I can get both of these frameworks to get popovers working alongside the full jQuery library, but not when I exclude jQuery. I know that Angular includes a version of jQuery called jQlite, and supposedly that should be all you need to implement these other frameworks. Here's my question, is it even possible to implement popovers in Angular without the full jQuery library?

Upvotes: 3

Views: 4772

Answers (2)

MikeyM
MikeyM

Reputation: 78

I wasn't able to get the AngularUI popups working either, but was successful with Angular-Strap. I put together an example plunker that may help you out. I used something similar on my site.

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

I'm using the popup for images. The 'image-popup' directive is placed in an img tag, where it expects a src attribute. Libraries I needed were the Bootstrap styles, Angular JS, and the Angular Strap script and template files.

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

<head>
<link data-require="[email protected]" 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="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="[email protected]" 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="[email protected]"></script>
<script src="//cdn.rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.tpl.js" data-semver="2.1.3" data-require="[email protected]"></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>

The example app code looks like this:

// 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'
    }

  }
}]);

You may want to fiddle with the popup options and styles. Here's the popup template I used:

<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's components worked well for me, and they have a builder that lets you put together just the components that you need. I did have one challenge in testing this directive on my site though. I also use AngularUI (for the carousel) and there was a namespace collision on a 'tooltip' module shared by both libraries. I never did figure out how to work around that one.

I hope this is helpful, all the best.

Upvotes: 0

mikeagoff
mikeagoff

Reputation: 386

The first line of the ui-bootstrap homepage states:

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 doesn't mention any dependancy on jQuery either.

So, to answer your question, yes, you can implment the popovers without jQuery being included in your project.

Upvotes: 2

Related Questions