1. дома
  2. Вопрос и ответ
  3. Не удается заставить AngularJS popover работать внутри шаблона директивы

Не удается заставить AngularJS popover работать внутри шаблона директивы

2015-03-14 2 views
0

Я в AngularJS (1.2.10), и у меня есть форма, которая является HTML-шаблоном, который открывается через директиву, которая использует bootstrapvalidator для проверки некоторых полей формы , Поля формы содержат специальные информационные кнопки, которые используют popover для предоставления дополнительных указаний по каждому полю.Не удается заставить AngularJS popover работать внутри шаблона директивы

Проблема, с которой я сталкиваюсь, заключается в том, что popovers не срабатывает, когда кнопка запуска находится внутри шаблона в директиве, но они работают нормально, если кнопка находится за пределами директивы, как показано на рисунке ниже.

Пожалуйста, проверьте этот шлепнуть для всего кода:

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? -->

Директива поповер:

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>

источник

2015-03-14 Chuck B

ответ

0

Таким образом, чтобы решить эту проблему, я первым снял директиву поповер и шаблон поповер так получается они не нужны, так как я уже использую Bootstrap, который, как я понимаю, уже имеет popovers и всплывающие подсказки.

Я изменил версию jQuery на: jquery-2.0.3.min.js;

Затем я разместил следующую директиву в том же файле, что и «основная» директива, чтобы включить всплывающие подсказки и всплывающие подсказки из Bootstrap.

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

И все, что было - тогда оно волшебным образом начало работать. :-) Проверьте шлепнуть для рабочей версии http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview

Следующие шаги, чтобы выставить данные двухсторонние внутри компонента и иметь поповер содержание тянуть от нг-модели вместо нынешних жестко закодированных значений ,

источник

2015-03-15 19:39:59

Смежные вопросы

 Смежные вопросы