Question

我在AngularJS（1.2.10）中，我有一个HTML模板表单，该模板通过使用bootstrapvalidator验证某些表单字段的指令公开。表单字段附有特殊信息按钮，使用弹出框提供有关每个字段的进一步指导。

我遇到的问题是，当触发按钮位于指令模板内部时弹出窗口不会触发，但如果按钮位于指令之外，它们可以正常工作，如下面的Plunk所示。

请检查此Plunk以获取所有代码：

http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview

主要指示：

(function(angular) {
'use strict';
angular.module('appointmentsApp', ['ui.bootstrap'])

.controller('appointmentsController', ['$scope', function($scope) {
  var vm = this
  $scope.form = 'frmPrimarySecondaryMedicalInsurance',
  $scope.test = {
    description: 'Test application'
  };
}])            
.directive('medicalInsuranceForm', function() {

  return {
    restrict: 'E',
    scope: {},
    templateUrl: 'medical-insurance-form.tpl.html',
    link: function(scope, form){
      form.bootstrapValidator({
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating : 'glyphicon glyphicon-refresh'
        },
        fields: {
          txtMedicalInsuranceName: {
            validators: {
              notEmpty:{
                message: 'Medical insurance name is required.'
              }
            }
          },
          txtPolicyHolderPrimaryInsurance: {
            validators: {
              notEmpty:{
                message: 'The primary insurance policy holder name is required.'
              }
            }
          }
        }
      });
    }
  };
});
})(window.angular);

模板中的元素：

    <!-- BEGIN: Out of Pocket Payer? -->
    <div id="frmCtrlOutOfPocketPayer">
      <div class="row">
        <div class="col-lg-6">
          <label class="control-label" for="txtOutOfPocketPayer">Out of Pocket Payer?:</label>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-3">
          <div class="input-group input-group-sm checkbox-xs">
            <span class="input-group-btn" id="btnHelp-OutOfPocketPayer">
              <button type="button" class="btn btn-default btn-sm label label-default" aria-label="Help button" data-container="body"
                      popover-placement="top" popover-trigger="popover" popover-title="Out of Pocket Payer?" 
                      popover="Please check this box if consumer states they will not be going through insurance.">
                  <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
              </button>
            </span>
            <input type="checkbox" class="form-control checkbox-inline checkbox-xs" name="txtOutOfPocketPayer" aria-describedby="btnHelp-OutOfPocketPayer" ng-model="vm.outOfPocketPayer" />
          </div>
        </div>
      </div>
    </div>
    <!-- END: Out of Pocket Payer? -->

popover指令：

angular.module('appointmentsApp', ['ui.bootstrap'])
    .directive("popoverHtmlUnsafePopup", function () {
      return {
        restrict: "EA",
        replace: true,
        scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&" },
        templateUrl: "popover-html-unsafe-popup.html"
      };
    });

弹出模板：

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
      <div class="popover-content" bind-html-unsafe="content"></div>
  </div>
</div>

最后，index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Medical Insurance Component</title>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/js/jquery-1.9.0.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>

  <script src="popover.js"></script>

  <script src="medicalInsuranceForm.js"></script>

  <link rel="stylesheet" type="text/css" href="appointments.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/custom-theme/jquery-ui-1.9.2.custom.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/FontAwesome.otf">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.eot">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.svg">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.ttf">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.woff">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css">

</head>
<body ng-app="appointmentsApp">
  <div ng-controller="appointmentsController">
    <div class="col col-sm-4"></div>
    <button type="button" class="btn btn-default btn-sm label label-default" aria-label="Help button" data-container="body" 
        popover-placement="bottom" popover-toggle="popover" popover-title="Medical Insurance Name" 
        popover="Insurance company name such as Aetna, Blue Cross, etc.">
        <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
    </button>
    <br/>
    <div class="row"></div>

    <medical-insurance-form></medical-insurance-form>

  </div>
</body>
</html>

Answer 1

所以，为了解决这个问题，我首先删除了popover指令和popover模板，因为事实证明它们不需要，因为我已经在使用Bootstrap，据我所知，它已经有了弹出窗口和工具提示。

我将jQuery的版本更改为：jquery-2.0.3.min.js;

然后，我将以下指令放在与“main”指令相同的文件中，以打开Bootstrap中的弹出框和工具提示。

  .directive('toggle', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      if (attrs.toggle=="tooltip"){
        $(element).tooltip();
      }
      if (attrs.toggle=="popover"){
        $(element).popover();
      }
    }
  };
})

就是这样 - 它然后神奇地开始工作。 :-) 检查Plunk的工作版本 http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview

接下来的步骤是从组件内部公开双向数据，并从ng-model而不是当前的硬编码值中提取弹出内容。

无法让AngularJS popover在指令的模板中工作

1 个答案: