angularjs:指令和ng重复添加额外div

我得到的指令如下：

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>

应用程序指令（“照片”，功能（）{ 返回{ 限制：“E”， 替换：正确， 范围：{ “照片ID”：“@”， “可滚动”：“@”， “大小”：“@”， “列表”：“=”， “内联”：“@”， “扩展名”：“@” }, 模板： “\n\ 长度={{list.length}}\n\ \n\ {{p.text}}\n\ \n\ ' }; }); 我两次援引它如下：

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>

不同纹理渲染密度的影响

结果是好的，除了我在照片标签替换中使用了一个无关的did标签。 我被这个困扰着，我真的不知道它是从哪里来的

有人能帮忙吗

[编辑1]这些div不是来自option text 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>

请参见屏幕截图：

---

如果在块的末尾有一个未关闭的div（应该是结束标记），浏览器会自动关闭它，以及父div。最后两行：

    </div>\n\
<div>'

\n\
'

应该是：

    </div>\n\
</div>'

\n\
'

好的，我找到了：

        </div>\n\
    <div>' <!-- this one was extraneous -->
};

\n\
' 
};

是的，大约一分钟前写信给你。我们的答案面临竞争条件，嗯，给了你答案。谢谢@肖姆兹