Question

我正在使用像这样的$ popover服务使用angular-strap创建popovers：

free()

这正确呈现：

然而，当我试图破坏popover时，它并没有完全删除它，因为当我将鼠标悬停在元素上时，它会显示：

我已经分别尝试了以下两行代码，它们产生相同的空弹出结果：

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

我做错了什么？

Answer 1

我试过并且对我来说工作正常，你可以在这里推荐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并分享。

不能破坏角带弹出

1 个答案: