Question

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

<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中执行的函数。 string（追加字符串）将通过如下函数返回。

    <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指令中没有可用的解析器，这就是为什么需要通过控制器提供解析表达式的原因。

AngularJS表达式无法在<img-crop>中使用

1 个答案: