CODEWITHSUNDEEP
angularjsangular-strap
ignacardel
ignacardel

Reputation: 91

Can't destroy angular-strap popover

I'm creating popovers with angular-strap using the $popover service like this:

this.popover = $popover(this.element, {
            title: 'popover title',
            content: 'popover content',
            trigger: 'hover',
            container: 'body',
            html: true
          });

This renders correctly:

enter image description here

However, when I try to destroy the popover, it doesn't remove it completely because when I hover over the element, it shows this:

enter image description here

I've tried separately both of the following lines of code which produce the same empty popover result:

this.popover.destroy();

this.popover.$scope.$destroy();

What am I doing wrong?

Upvotes: 3

Views: 703

Answers (1)

Harpreet
Harpreet

Reputation: 1607

I tried and its working fine for me, you can refer the plnkr here: http://plnkr.co/edit/KyioKkQhxZDfUnQ0jn2E?p=preview

// HTML code

<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
    <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.7"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.7"></script>
    <script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.7"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">

<div class="bs-docs-section" ng-controller="PopoverDemoCtrl">


  <div class="bs-example" style="padding-bottom: 24px;" append-source>

    <!-- A popover can also be triggered programmatically using the $popover service -->
    <button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
      <br />
      <small>(using $popover service)</small>
    </button>
    <div><a ng-click="hidePopover()">Click to close</a></div>

  </div>


</div>  </body>

</html>

// JS code 

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);

app.controller('MainCtrl', function($scope) {
});

'use strict';

angular.module('mgcrea.ngStrapDocs')

.config(function($popoverProvider) {
  angular.extend($popoverProvider.defaults, {
    html: true
  });
})

.controller('PopoverDemoCtrl', function($scope, $popover) {

  $scope.popover = {title: 'Title', content: 'Hello Popover<br />This is a multiline message!'};

  var asAServiceOptions = {
    title: $scope.popover.title,
    content: $scope.popover.content,
    trigger: 'manual'
  }

  var myPopover = $popover(angular.element(document.querySelector('#popover-as-service')), asAServiceOptions);
  console.log(myPopover);

  $scope.togglePopover = function() {
    myPopover.$scope.$show();

  };
  $scope.hidePopover = function() {
    myPopover.destroy();

  };
});

Or may be if you are still facing some issue, you can create a plnkr and share.

Upvotes: 1

Related Questions