大佬教程收集整理的这篇文章主要介绍了angularjs – 使用ng-transclude在表中似乎不能正常工作,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的指令:
app.directive('skNoResult',['$rootScope',function () { return { restrict: 'A',replace: true,transclude: true,template: '<tr ng-if="!hasResult"><td class="left" colspan="{{ colSpan }}"><ng-transclude></ng-transclude></td></tr>',link: function (scope,elem,attrs,ctrl) { var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length; scope.colSpan = span; scope.$watch(attrs.skNoResult,function (list) { if (list.length) { scope.hasResult = true; } else { scope.hasResult = false; } }); } }; }]);@H_301_4@它基本上只是跟踪数据集(数组),并检查长度以查看是否有任何数据.如果那里我们用ngIf显示这个行.
我的html看起来像这样
<tr sk-no-result="model.dataSet">Here is my text I want to transclude into my directive</tr>@H_301_4@问题是,被转录的文本被插入到DOM中,只是一个textNode,并且出现在< table>而不是内部.任何想法为什么会发生这种情况?
以下是您可以使用的解决方法:
<tr ng-if="!model.dataSet.length"> <td sk-no-result="model.dataSet">Here is my text I want to transclude into my directive</td> </tr>@H_301_4@和指令:
app.directive('skNoResult',function () { return { restrict: 'A',template: '<td class="left" colspan="{{ colSpan }}"><div ng-transclude></div></td>',attrs) { var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length; scope.colSpan = span; } }; }])@H_301_4@注意,ngTransclude的元素使用,即< ng-transclude>< / ng-transclude>只能从版本1.3.0-beta.16及更高版本获得.如果您使用的是1.2版本,则需要使用上述示例中的属性使用情况< divng-transclude>< / div>
以上是大佬教程为你收集整理的angularjs – 使用ng-transclude在表中似乎不能正常工作全部内容,希望文章能够帮你解决angularjs – 使用ng-transclude在表中似乎不能正常工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。