angularjs:directive和ng-repeat添加额外的div

时间:2014-09-21 17:32:05

标签: angularjs angularjs-ng-repeat

我的指令如下:

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>

结果还可以,除了我最终在照片标签替换中添加了一个无关的标签。 我坚持这个,我真的不知道它来自哪里。

任何人都可以提供帮助吗?

enter image description here

[编辑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>

参见屏幕截图: enter image description here

2 个答案:

答案 0 :(得分:1)

你的块末尾有一个未闭合的div(应该是结束标记),浏览器会自动关闭它,也会自动关闭它。最后两行:

    </div>\n\
<div>'

应该是:

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

答案 1 :(得分:1)

好的,我找到了:

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