AngularJS表达式不起作用<img-crop>

Question

我正在尝试修改项目ngImgCrop（ https://github.com/alexk111/ngImgCrop ），以允许在同一页面中裁剪多个图像，但是我不知道我需要多少图像，这是动态创建的。 因此，我需要关联到动态值的“图像”字段，同时将这个变量放入我的范围。 问题在于该标签未评估角度代码。

<div class="cropArea" id="{{'person'+person.Id}}">
    <img-crop image="{{'person'+person.Id}}" result-image="myCroppedImage"></img-crop>
</div>

即使它们具有相同的代码，在加载页面时，html代码也会显示：

<div class="cropArea" id="person12345">
    <img-crop image="{{'person'+person.Id}}" result-image="myCroppedImage"></img-crop>
</div>

在我的范围内，从开始就创建了$ scope.person12345变量，但是如果没有这部分，就不可能进行绑定。 我能做什么？

注意：在我的init（）函数中，我创建了所有变量：

angular.forEach(persons, function (person, index) {        
    $scope['person'+person.Id]=''; 
}); 

我实际上可以在加载页面时看到变量$ scope.person12345。 无论如何，为什么该表达式只适用于div而不适用于img-crop？

Answer 1

请把您的表达式作为将在Controller中执行的函数。 字符串（附加字符串）将通过如下函数返回。

    <div class="cropArea" id="{{'person'+person.Id}}">
        <img-crop image="getImagePath(person.Id)" result-image="myCroppedImage"></img-crop>
    </div>

Controller like below:

    $scope.getImagePath = function(id){return 'person'+id+'.png';};

image指令中没有可用的解析器的某些原因，这就是为什么您需要通过控制器提供解析的表达式的原因。