输入值不显示在引导弹出框内答案

【问题标题】：Input value doesn't show inside bootstrap popover输入值不显示在引导弹出框内
【发布时间】：2017-07-27 09:43:19
【问题描述】：

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

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 不是真的。这个 ng-model 应该在此处设置值，这在“正常”场景中有效，并且仅在此弹出窗口中无效。
@YashGanatra 它更新了值，但是在弹出框弹出的开始时，输入中不显示值。在示例中很明显。

标签： angularjs twitter-bootstrap popover

【解决方案1】：

我想我终于弄清楚了问题所在。您正在使用 jquery 进行弹出窗口，因为将 jquery 代码与 angular 一起使用不是一个好习惯在您的情况下，您使用的是角度，而 ng-model 所做的是它不断地监视元素值，如果它发生变化，它会调用摘要循环以根据模型更新所有值，反之亦然。因此，当您将角度代码提供给 jquery 内容函数时，它可能会导致角度停止观看 costPrice，如果您通过 ui-bootstrap 弹出窗口或任何其他角度第三方弹出窗口实现它，您可以在弹出窗口中看到它，那么您可以看看效果。这是代码，

<!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 无法处理角度代码，所以您得到了错误。希望这会有所帮助:)

【讨论】：