无法销毁angular-strap弹出窗口

Question

无法销毁angular-strap弹出窗口

3

我将使用 angular-strap 的 $popover 服务创建弹出窗口，示例如下：

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

这段代码可以正确显示:

然而，当我尝试销毁弹出框时，它并没有完全删除，因为当我悬停在元素上时，它会显示如下内容:

我已经尝试分别使用以下两行代码，但结果都是空的弹出框：

this.popover.destroy();

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

我做错了什么？

- ignacardel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harpreet · Accepted Answer

我尝试过，对我来说运行良好，你可以参考这里的plnkr：http://plnkr.co/edit/KyioKkQhxZDfUnQ0jn2E?p=preview // HTML代码

<!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代码

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();

  };
});

如果您仍然遇到问题，可以创建一个 plnkr 并分享。