如何在焦点/点击时停止显示角度工具提示?

时间:2016-06-01 09:51:42

标签: angularjs twitter-bootstrap angular-ui-bootstrap

我有一个在模糊处显示工具提示的字段。但我不知道为什么当我点击该字段时它也会弹出。 以下是codepen示例:http://codepen.io/Octtavius/pen/aZzyKw?editors=1010

下面是我使用angular bootstrap的代码:

<body ng-app="ui.bootstrap.demo" class='container'>


    <input type="text" 
         ng-controller="myPopoverCtrl"
         popover-template="myPopover.templateUrl" 
         popover-title="This is a popover" 
         popover-placement="bottom" 
         popover-is-open="myPopover.isOpen" 
         ng-blur="myPopover.open()" />

    <script type="text/ng-template"  id="myPopoverTemplate.html">
        <h2 ng-bind="myPopover.data"/>
        <button class="btn btn-success" ng-click="myPopover.close()">
            Close me!
        </button>
    </script>

</body>

控制器

app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller(
   'myPopoverCtrl', ['$scope', function($scope) {

      // query popover
      $scope.myPopover = {

      isOpen: false,

      templateUrl: 'myPopoverTemplate.html',

      open: function open() {
        $scope.myPopover.isOpen = true;
        $scope.myPopover.data = 'Hello!';
      },

      close: function close() {
        $scope.myPopover.isOpen = false;
      }
    };
  }
]);

任何人都可以帮助理解为什么工具提示弹出点击时我将其设置为模糊弹出/离开现场???

1 个答案:

答案 0 :(得分:0)

这是因为弹出窗口的默认触发器是点击:https://angular-ui.github.io/bootstrap/#/popover。 尝试按popover-trigger="none"

禁用它