如何根据Bootstrap Popover的用户选择调用AngularJS服务方法？

没问题，我来一步步帮你搞定这个需求！咱们分几个关键步骤来实现：

1. 调整Popover的HTML配置 #

首先得把按钮改成支持HTML内容的模式，这样才能塞进Yes/No按钮。把原来的data-html="false"改成true，再把data-content替换成带按钮的内容：

<button href="#" 
        data-toggle="popover" 
        title="重复记录提示" 
        data-content='<button ng-click="handleConfirmYes()" class="btn btn-sm btn-primary">确认</button> <button ng-click="handleConfirmNo()" class="btn btn-sm btn-secondary">取消</button>'
        data-trigger="click" 
        data-html="true" 
        data-placement="left">
  触发提示
</button>

2. 结合AngularJS处理Popover初始化与按钮事件 #

因为你用的是AngularJS，最好把Popover的初始化逻辑放到控制器里（而不是单纯的$(document).ready），这样能更好地和Angular的作用域结合。注意：动态生成的Popover内容不会自动被Angular识别，所以需要手动用$compile让按钮的点击事件绑定到Angular方法上。

假设你的Angular控制器是这样的：

angular.module('yourApp', [])
.controller('YourController', function($scope, $compile, YourDataService) {
  // 替换成你实际的重复记录判断逻辑
  $scope.DuplicateRecord = false; 

  // 初始化Popover（仅当有重复记录时）
  $scope.initPopover = function() {
    if ($scope.DuplicateRecord) {
      $('[data-toggle="popover"]').popover({
        template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
      }).on('shown.bs.popover', function() {
        // Popover显示后，编译内容并绑定到当前作用域
        var popoverBody = $('.popover-body');
        $compile(popoverBody)($scope);
        $scope.$apply();
      });
    }
  };

  // 页面加载完成后执行初始化
  $scope.$on('$viewContentLoaded', function() {
    $scope.initPopover();
  });

  // Yes按钮对应的方法，调用你的服务
  $scope.handleConfirmYes = function() {
    YourDataService.processDuplicateRecord().then(function(response) {
      console.log('确认操作完成');
      // 操作完成后关闭Popover
      $('[data-toggle="popover"]').popover('hide');
    });
  };

  // No按钮对应的方法
  $scope.handleConfirmNo = function() {
    console.log('取消操作');
    $('[data-toggle="popover"]').popover('hide');
  };
});

3. 关键注意点 #

• $compile的作用：Popover的内容是jQuery动态插入DOM的，Angular默认不会识别里面的ng-click指令，所以必须用$compile把内容和当前控制器的作用域绑定，这样点击事件才能触发Angular方法。
• 条件初始化：把DuplicateRecord的判断逻辑放到Angular控制器里，确保只有满足条件时才初始化Popover，避免不必要的DOM操作。
• 关闭弹窗：按钮点击后调用popover('hide')关闭弹窗，提升用户体验。

完整整合后的代码 #

HTML部分 #

<div ng-app="yourApp" ng-controller="YourController">
  <button href="#" 
          data-toggle="popover" 
          title="重复记录提示" 
          data-content='<button ng-click="handleConfirmYes()" class="btn btn-sm btn-primary">确认</button> <button ng-click="handleConfirmNo()" class="btn btn-sm btn-secondary">取消</button>'
          data-trigger="click" 
          data-html="true" 
          data-placement="left">
    触发提示
  </button>
</div>

JavaScript部分 #

angular.module('yourApp', [])
.controller('YourController', function($scope, $compile, YourDataService) {
  // 替换成你实际的重复记录判断逻辑
  $scope.DuplicateRecord = true;

  $scope.initPopover = function() {
    if ($scope.DuplicateRecord) {
      $('[data-toggle="popover"]').popover({
        template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
      }).on('shown.bs.popover', function() {
        $compile($('.popover-body'))($scope);
        $scope.$apply();
      });
    }
  };

  $scope.$on('$viewContentLoaded', $scope.initPopover);

  $scope.handleConfirmYes = function() {
    YourDataService.processDuplicateRecord().then(function() {
      console.log('已处理重复记录');
      $('[data-toggle="popover"]').popover('hide');
    });
  };

  $scope.handleConfirmNo = function() {
    console.log('取消处理');
    $('[data-toggle="popover"]').popover('hide');
  };
})
// 示例服务，替换成你自己的业务服务
.service('YourDataService', function($q) {
  this.processDuplicateRecord = function() {
    // 模拟服务请求
    return $q(function(resolve) {
      setTimeout(function() {
        resolve();
      }, 500);
    });
  };
});

这样就能完美实现你的需求：只有存在重复记录时才会创建Popover，点击Yes/No按钮会调用对应的AngularJS服务方法，操作完成后自动关闭弹窗。

内容的提问来源于stack exchange，提问作者user3767641