Question

陷入困境......

我有一个popover元素，我需要为其指定内容。
内容可以是表示HTML或其功能的String 生成该HTML。
popover的HTML应该是一个复选框列表，表示数组中的对象是指令范围的一部分。每次显示时都会请求HTML 酥料饼。
单击这些复选框应更改数组中对象的状态。我坚持的是能够将新生成的HTML与范围内的模型一致地绑定。
我的意思是它可能是第一次，但不是随后的任何时候，或者可能会产生奇怪的HTML开始。

我做了什么尝试并做了工作：

（a）将它放在页面上显然是有效的（意思是显示它正确并单击复选框确实会改变状态对象）

<form id="{{id}}">
     <label class="checkbox" ng-repeat="field in metadata.fields"> 
          <input type="checkbox" ng-model="field.displayByDefault"> {{field.text}}
     </label>
</form>

（b）将表单元素作为jQuery对象（$（'＃FormId'））抓取并将其作为内容提供给popover选项实际上有效，但只是第一次，因为它在第一次将它从DOM中删除使用

（c）以不同方式运行HTML并运行$ compile无效或产生奇怪的HTML（如生成n ^ 2个复选框，其中n是我应该拥有的原始复选框数）

任何建议都会有所帮助。

====更新

我有一个隐藏的表单，当没有隐藏时会显示一个功能性的html（即复选框正在根据需要更新范围）。如果我使用表单本身并将其放入弹出窗口 - 它只在第一次工作。所以在这一点上，我只是想创建一个克隆，绑定到范围并将其放入弹出窗口。

<form id="{{id}}_columnSelection">
    <label class="checkbox" ng-repeat="field in metadata.fields"> <input type="checkbox"
        ng-model="field.displayByDefault"> {{field.text}}
    </label>
</form>

我使用tipsy插件来显示一个popover，所以这里是触发popover的JS和生成html的代码：

var getContent = function() {
    var $content = $('#' + $scope.configuration.id + '_columnSelection');
    var $clone = $content.clone(true, true);
    $compile($clone.contents())($scope);
    return $clone;
};

$columnSelector.popover({
 html : true,
 placement : 'left',
 trigger : 'manual',
 title : 'Select Columns',
 content : getContent()
});
$columnSelector.popover('toggle');

Answer 1

这可能对某些人没有帮助，但这是在我的特定情况下有效的解决方案。帮助来自于我使用tipsy插件来显示popover的事实。所以我使用插件API来解决问题，而不是AngularJS。 Tipsy允许以两种方式指定内容。其中一个是“内容”选项，另一个是“模板”选项。如果你使用模板选项，那么你可以重用页面上创建的html（不需要专门为弹出窗口动态创建它）并且它不会在popover close上被销毁。所以在这种情况下它只是成为“常规的AngularJs业务”。

将动态创建的html绑定到范围模型

1 个答案: