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指令中沒有可用的解析器的某些原因，這就是為什么您需要通過控制器提供解析的表達式的原因。