Question

我正在尝试在自己的指令模板中转换包含通过属性传递的表达式的字符串。我的想法是做这样的事情：

<div custom-directive images-source="'staticpath/blah/blah/{{Item.Src}}'"></div>

然后，在模板中，我会有一个ngRepeat指令，它会迭代这样的数据集：

<ul>
    <li ng-repeat="Item in Items">
        <img ng-src="{{imagesSource}}{{Item.name}}.{{Item.extension}}" />
    </li>
</ul>

预期结果应该是这样的：

<ul>
    <li ng-repeat="Item in Items">
        <img ng-src="staticpath/blah/blah/src1/file1.jpg" />
        <img ng-src="staticpath/blah/blah/src2/file2.jpg" />
        <img ng-src="staticpath/blah/blah/src3/file3.jpg" />
        <img ng-src="staticpath/blah/blah/src4/file4.jpg" />
    </li>
</ul>

我试图在我的模板中直接调用$ interpolate和$ compile，但我得到一个空字符串。

{{$interpolate(imagesSource)}} and {{$compile(imagesSource)}}

有什么想法吗？

修改想象一下下一个场景。我们有一个指令，将显示图像库列表。每个图库都有：标题，一点描述以及1到n张图片。

好吧，假设我们在图像文件夹'/ media / images / galleries /'中有一个常量。然后，在模板内部，当在ngRepeat循环上时，我将需要使用该常量和其中一个属性构建路径（在这种情况下，我们可以将其命名为“子文件夹”），但我不希望自己的指令决定需要哪个属性。（这就是为什么我想在属性中传递表达式。）

指令：

<div image-galeries images-source="'staticpath/blah/blah/{{Gallery.subfolder}}'">

模板：

<div ng-repeat="Gallery in Galleries">
    <h3>{{Gallery.title}}</h3>
    <p>{{Gallery.description}}</p>
    <ul>
        <li ng-repeat="Image in Gallery.Images">
            <img ng-src="{{imagesSource}}{{Image.name}}.{{Image.extension}}" />
        </li>
    </ul>
</div>

结果：

<div ng-repeat="Gallery in Galleries">
    <h3>Gallery 1</h3>
    <p>Gallery description 1</p>
    <ul>
        <li ng-repeat="Image in Gallery.Images">
            <img ng-src="staticpath/blah/blah/src1/file1.jpg" />
            <img ng-src="staticpath/blah/blah/src1/file2.jpg" />
            <img ng-src="staticpath/blah/blah/src1/file3.jpg" />
            <img ng-src="staticpath/blah/blah/src1/file4.jpg" />
        </li>
    </ul>
</div>
<div ng-repeat="Gallery in Galleries">
    <h3>Gallery 2</h3>
    <p>Gallery description 2</p>
    <ul>
        <li ng-repeat="Image in Gallery.Images">
            <img ng-src="staticpath/blah/blah/src2/file1.jpg" />
            <img ng-src="staticpath/blah/blah/src2/file2.jpg" />
        </li>
    </ul>
</div>

对不起，关于我的英语，我希望它足够清楚：D

将带有表达式的字符串传递给指令并在模板

0 个答案: