輸入值不顯示在引導程序彈出框內

我有一個指令來顯示引導程序的彈出程序，用戶可以在其中更新某個值。問題是我的值不可見作爲輸入的值（它是綁定的，我可以編輯它）。在輸入旁邊的彈出窗口中可以看到相同的值。輸入值不顯示在引導程序彈出框內

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

這是當然的一些片只有整個項目的，但它顯示的問題。任何想法如何使這個值在輸入內部可見？

來源

2017-07-27 Mateusz Rogulski

爲什麼你使用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不能處理的角碼。希望這會幫助:)

來源

2017-07-27 12:00:34

輸入值不顯示在引導程序彈出框內

回答

相關問題