我的指令如下:
app.directive("photos", function () {
return {
restrict: "E",
replace: true,
scope: {
"photoid": "@",
"scrollable": "@",
"size": "@",
"list": "=",
"inline": "@",
"extension": "@"
},
template:
'<div id="photos{{photoid}}" class="scroller" ng-class="[{{scrollable}}]" ng-style="{display:list.length==1?\'inline-block\':\'block\', width: list.length==1?\'{{size?size:\'171px\'}}\':\'auto\', height: \'{{size?size:\'171px\'}}\'}">\n\
length={{list.length}}\n\
<div ng-repeat="p in list"\n\
ng-style="{\'background-image\': \'url({{p.file}}.thumb.{{extension}})\', width: \'{{size?size:\'171px\'}}\', height: \'{{size?size:\'171px\'}}\'}"\n\
ng-click="$parent.$parent.openPopoverImageViewer(\'#photos{{photoid}}\', {{$index}})">\n\
<div>{{p.text}}</div>\n\
</div>\n\
<div>'
};
});
我按如下方式调用它两次:
<h2 class="tintColor">Impact de la densité sur le rendement grain d'une variété</h2>
<photos photoid="ImpactPrecoce" list="[{file:'rsc/drive/4-Semis/d-ChoixDeLaDensite/ImpactPrecoce'}]" size="256px" extension="png"></photos>
<photos photoid="ImpactDemiPrecoce" list="[{file:'rsc/drive/4-Semis/d-ChoixDeLaDensite/ImpactDemiPrecoce'}]" size="256px" extension="png"></photos>
结果还可以,除了我最终在照片标签替换中添加了一个无关的标签。 我坚持这个,我真的不知道它来自哪里。
任何人都可以提供帮助吗?
[编辑1]这些div不是来自选项文本div。这是一个提供可选文本的版本和相关的屏幕截图。
<photos photoid="ImpactPrecoce"
list="[
{file:'rsc/drive/4-Semis/d-ChoixDeLaDensite/ImpactPrecoce', text:'first'},
{file:'rsc/drive/4-Semis/d-ChoixDeLaDensite/ImpactDemiPrecoce', text:'second'}
]"
size="256px"
extension="png"></photos>
参见屏幕截图:
答案 0 :(得分:1)
你的块末尾有一个未闭合的div(应该是结束标记),浏览器会自动关闭它,也会自动关闭它。最后两行:
</div>\n\
<div>'
应该是:
</div>\n\
</div>'
答案 1 :(得分:1)
好的,我找到了:
</div>\n\
<div>' <!-- this one was extraneous -->
};