ngRepeat删除工具提示样式
问题描述:
在此先感谢您的帮助。ngRepeat删除工具提示样式
我有一个样式的jQuery工具提示,但是当它在ngRepeat中使用时,工具提示的自定义样式被删除,我不知道为什么。
例子:
工具提示显示了正确的造型:
<div class="toggle">
<input type="checkbox" id="amount_{{i.ProductCode}}" name="amount" data-ng-model="$parent.amount" value="{{i.ProductCode}}" data-ng-required="1" />
Hello <span class="info-tip" title="World!"></span>
</div>
工具提示显示了默认样式:
<div data-ng-repeat="i in options.amounts" data-ng-cloak="">
<div class="toggle">
<input type="checkbox" id="amount_{{i.ProductCode}}" name="amount" data-ng-model="$parent.amount" value="{{i.ProductCode}}" data-ng-required="1" />
Hello <span class="info-tip" title="World!"></span>
</div>
</div>
我花了相当长的一段寻找到它,从我的研究中可以看出,它似乎是一个ngRepeat范围界定问题。然而,我不确定这是否是问题,我不知道如何解决这个问题(因此来到这里)。理想情况下,我想使用ngRepeat并保持我的自定义工具提示样式。
任何指导表示赞赏,谢谢!
答
解决方案是在中继器初始化并呈现后,“刷新”中继器中的动态元素。
创建新指令播放时ngRepeat完成渲染:
app.directive('onFinishRender', ["$timeout",function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
};
}]);
在控制器中创建的播出然后更新提示的家长监听器(这反过来又更新提示):
$scope.$on('ngRepeatFinished', function (e) {
window.hbf.angular.components.byName("components/Tooltip")
.update($('.parentClass'));
});
增加 '上完成渲染= “ngRepeatFinished”' 到ngRepeat在ASCX:
<div data-ng-repeat="i in items" data-ng-cloak="" on-finish-render="ngRepeatFinished">
推理:在页面加载事件上,jQuery将自定义工具提示类绑定到工具提示函数。但是,当它在中继器中使用时,会在页面加载后触发事件并且没有现有的绑定。因此,有必要再次将新创建的元素绑定到工具提示以“刷新”它们并使其显示。
基本上jQuery被初始化并呈现,但ngRepeat位于客户端。每个重复动作都是用子范围而不是父级动态生成的,因此所有原始绑定都超出了范围,并且在创建ngRepeat之后需要重新绑定。
如果有人想要更多的信息,我是如何处理这件事的,我把它贴在我的development blog上,你可以找到here。
可以请你创建小提琴链接 – Arun
你能提供你所有的代码吗?没有它就很难排除故障。 –
不幸的是,我无法分离和提取继承的风格,以便能够创建小提琴链接。 我正在寻找ngRepeat的一般洞察力,希望它能确认/否定我对范围问题的假设。 对不起,我无法提供完整的代码。 – Palindrome