AngularJS - 在弹出窗口中单击按钮时关闭引导弹出窗口

Question

正如 plunker http://plnkr.co/edit/O1TK12kJT8vnLKPPILc0?p=preview 所展示的那样。我想在单击Cancel 按钮时显示引导弹出窗口。第一次单击按钮时，它会打开弹出框，但之后我必须单击按钮两次才能打开弹出框。有什么想法吗？

Answer 1

您的代码中的问题是由于 popover 具有的切换功能。所以在popover关闭后，第一次点击它实际上是去掉了toggle，第二次已经打开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 bootstrap-tpls.js from here 并将其包含在您的页眉中

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>

享受更简单的解决方案。