AngularJS 표현이 작동하지 않습니다. <img-crop>

Question

동일한 페이지에서 여러 이미지를 자르기 위해 ngImgCrop (https://github.com/alexk111/ngImgCrop) 프로젝트를 수정하려고하는데, 필요한 이미지의 수를 동적으로 생성 할 수 있는지 알 수 없습니다. 그래서 나는 동적 인 값의 '이미지'필드에 연관시켜야하고, 동시에이 변수를 내 범위에 넣어야합니다. 문제는이 라벨이 각도 코드를 평가하지 않는다는 것입니다. 변수 $ scope.person12345가 만들어 처음부터 내 범위에서

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

하지만, 그것은이다 : 그들은 동일한 코드가있을 때

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

심지어 페이지는 HTML 코드를로드 할 때이다 이 부분없이 바인딩을 만드는 것은 불가능합니다. 어떻게해야합니까?

참고 : 내 초기화() 함수에서 내가 모든 변수를 만들 :

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

페이지가로드 될 때 실제로 변수 $ scope.person12345을 볼 수 있습니다. 어쨌든 표현이 div가 아니라 img 작물이 아닌 이유는 무엇입니까?

Answer 1

표현식을 컨트롤러에서 실행할 함수로 넣으십시오. 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의 지시로 사용 가능한 구문 분석기가없는 방법 일부

, 즉이다.