输入值不显示在引导程序弹出框内

问题描述：

我有一个指令来显示引导程序的弹出程序，用户可以在其中更新某个值。问题是我的值不可见作为输入的值（它是绑定的，我可以编辑它）。在输入旁边的弹出窗口中可以看到相同的值。输入值不显示在引导程序弹出框内

HTML

<div custom-popover popover-html="<div><span>{{costPrice}}</span><input type='text' ng-model='costPrice' /></div>"></div>

$(elem).popover({ 
      trigger: 'manual', 
      html: true, 
      content:() => { 
       var content = $compile(attr.popoverHtml)(scope); 
       return content; 
      }, 
      placement: 'bottom' 
     });

Demo

这是当然的一些片只有整个项目的，但它显示的问题。任何想法如何使这个值在输入内部可见？

为什么你使用jQuery插件？ .. –

你只是想将'value ='{{costPrice}}''添加到'input'吗？ – DavidG

所以你的弹出不更新值？ –

答

我想我终于明白了什么是问题。你正在使用jQuery的弹出式窗口，因为它不是一个好的做法，以角度使用jQuery代码在你的情况下，你使用的是角度，而ng-model所做的是持续监视元素值，如果它改变了调用摘要循环根据模型更新所有值，反之亦然。所以，你已经给角码jQuery的内容功能，它可以导致角停止观看costPrice，你可以在popover中看到，如果你通过ui-bootstrap popover或任何其他角度的第三方popovers实现它，那么你可以看到效果。以下是一个代码，

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="PopoverDemoCtrl"> 
 

 
     <button style="margin:70px;" uib-popover-template="dynamicPopover.templateUrl" popover-placement="bottom-right" popover-title="{{dynamicPopover.title}}" 
 
      type="button" class="btn btn-default">Popover With Template</button> 
 

 
     <script type="text/ng-template" id="myPopoverTemplate.html"> 
 
      <div>{{dynamicPopover.content}}</div> 
 
      <div class="form-group"> 
 
       <label>Popup Title:</label> 
 
       <input type="text" ng-model="dynamicPopover.content" class="form-control"> 
 
      </div> 
 
     </script> 
 
     <script> 
 
      angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
      angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) { 
 
       $scope.dynamicPopover = { 
 
        content: 'Hello, World!', 
 
        templateUrl: 'myPopoverTemplate.html', 
 
        title: 'Title' 
 
       }; 
 
      }); 
 
     </script> 
 
    </div> 
 
</body> 
 

 
</html>

因此，正如我说你给具有角代码的html jQuery来处理它，所以你得到错误的jQuery不能处理的角码。希望这会帮助:)

输入值不显示在引导程序弹出框内

相关推荐