Question

通过plunker http://plnkr.co/edit/O1TK12kJT8vnLKPPILc0?p=preview证明了这一点。我想在点击Cancel按钮时显示一个引导弹出窗口。第一次单击按钮时，它会打开弹出窗口，但之后我必须单击按钮两次以打开弹出窗口。有什么想法吗？

Answer 1

代码中的问题是由于popover具有的切换功能。因此，在弹出窗口关闭后，第一次单击它时，实际上它会移除切换，第二次已经打开弹出窗口。

解决方案（基于你的plunkr）：

将控制器和指令更改为上述内容：

app.controller('AppController', function($scope) {
 $scope.cancel = function(msg) {
  $scope.msg = msg;
 };
});

app.directive('cancelConfirmation', function($compile, $timeout) {
return {
  restrict: 'A',
  scope: {
    onCancel: '&'
  },
  link: function(scope, elem, attrs) {

      var content = '<div><p>Are you sure you want to cancel?</p><button id="yes" class="btn btn-default" ng-click="no()">No</button>&nbsp;' +
        '<button id="no" class="btn btn-primary" ng-click="yes()">Yes</button></div>&nbsp;';

      elem.popover({
        html: true,
        content: $compile(content)(scope),
        placement: 'top'
      });

      elem.on('shown.bs.popover', function() {
        elem.attr('disabled', true);
      });

      scope.yes = function() {
        elem.popover('hide');
        elem.triggerHandler('click');
        elem.attr('disabled', false);
        scope.onCancel()('yes called');
      };

      scope.no = function() {
        elem.popover('hide');
        elem.triggerHandler('click');
        elem.attr('disabled', false);
      };
  }
};
});

并在取消按钮上：

<button class="btn btn-danger" cancel-confirmation data-on-cancel="cancel">Cancel</button>

Answer 2

我可能有一个解决方法：

elem.popover({
   html: true,
   content: $compile(content)(scope),
   placement: 'top',
   trigger: 'manual'
});

elem.on('click', function() {
   elem.popover('show');
});

这样，如果显示弹出框，则必须手动触发，并在元素上添加单击侦听器。

Answer 3

为您查看this解决方案。

获得此目的的步骤：

1.从脚本中删除指令

2.add来自here的bootstrap-tpls.js并将其包含在您的页眉中

3.更改脚本以使应用程序具有注入的引导程序和控制器：

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

app.controller('AppController', function($scope) {
  $scope.yes = function() {
      console.log('yes called');
    };

    $scope.no = function() {
      console.log('no called');
    };
});

4.使用以下标记创建yes-no.html模板：

 <div><button id="yes" class="btn btn-default" ng-click="no()">No</button>&nbsp;
 <button id="no" class="btn btn-primary" ng-click="yes()">Yes</button></div>&nbsp;

5.将取消按钮更改为

 <button popover-trigger="focus" uib-popover-template="'yes-no.html'" popover-title="Some title here?" type="button" class="btn btn-danger">Cancel</button>

享受更简单的解决方案。

AngularJS - 在弹出窗口中单击按钮时关闭自举弹出窗口

3 个答案: