2016-03-15 37 views
3

我創建popovers:

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

這個正確呈現:

enter image description here

然而,當我試圖摧毀popover時,它不會完全刪除它,因爲當我將鼠標懸停在元素上時,它會顯示:

enter image description here

我分別嘗試都將下面的代碼行生產同類空酥料餅的結果:

this.popover.destroy(); 

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

我在做什麼錯?

回答

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和共享。