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

Question

I am trying to modify the project ngImgCrop ( https://github.com/alexk111/ngImgCrop ) for allowing crop multiple images in the same page, but I do not know how many images I would need, this is created dynamically. So, I need to associate to the 'image' field of a dynamic value, and at the same time I put this variable in my scope. The problem is that this label is not evaluating the angular code.

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

Even when they have the same code, when the page is loaded the html code shows:

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

In my scope since the beginning the variable $scope.person12345 is created, but It is impossible to make the binding without this part. What can I do?

Note: In my init() function I create all the variables:

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

I actually can see the variable $scope.person12345 when the page is loaded. In any case why does the expression worked for the div and not for the img-crop?

Answer 1

Please put your expression as a function which will execute in the Controller. string(appending string) will return by a function like below.

    <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';};

Some how there is no parser available in the directive of image , that's why you need to give parsed expression via a controller.