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

Question

遇到问题…。

• 我有一个popover元素，我需要为它指定内容。

• 内容可以是表示HTML的字符串，也可以是生成该HTML。

• popover的HTML应该是一个复选框列表，这些复选框表示作为指令范围一部分的数组中的对象。每次我显示popover。

• 单击这些复选框应该会更改数组中对象的状态。我坚持的是能够将新生成的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（即复选框根据需要更新范围）。如果我使用表单本身并将其放入popover中，它只在第一次工作。因此，在这一点上，我只是试图创建一个克隆，绑定到作用域并将其放入popover。

<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允许以两种方式指定内容。其中之一是"内容"选项，另一个是"模板"选项。如果您使用template选项，那么您可以重用在页面上创建的html（无需专门为popover动态创建它），并且它不会在popover关闭时被销毁。因此，在这种情况下，它就变成了"AngularJs的常规业务"。