0

我正在尝试修改项目 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？

4

1 回答 1

0

请将您的表达式作为将在控制器中执行的函数。string(appending 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，这就是为什么您需要通过控制器提供解析表达式的原因。

于 2017-03-03T17:22:42.417 回答