angularjs : 하나의 변수에 값을 반환하는 함수를 저장하는 방법. ng-repeat를 기반으로

Question

안녕하세요, ng-repeat에서 intrestedid를 가져 오는 중입니다. 이미지를 가져 오기 위해 별도의 API를 보내야하기 때문에 다른 서비스를 호출하고 해당 변수를 동적으로 저장하고 싶습니다.

내 HTML 내 컨트롤러는 다음과 같이이다이

<div class="" ng-repeat="item in items" > 
    <div ng-init="MyPic = getMyprofile(item.interestedTo)"> 
    <img src="{{MyPic}}"> 
    </div> 
</div> 

모습이다.

$scope.getMyprofile = function(IntrstdId){ 
    appServices.profile(IntrstdId, function(response){ 
     $scope.meDetails = response.data; 
    }) 
    return $scope.meDetails; 

    } 

내 서비스는 다음과 같습니다.

service.profile= function(userId, callback) { 
    path = serviceUrl + '/profile/'+ userId; 
    $http({ 
     method: 'GET', 
     url: path 
     }).then(function(data) { 
     callback(data) 
    }, function(data) {}); 
} 

그러나이 코드의 모든 문제는 정의되지 않았습니다.

Answer 1

나는 당신에게 도움이 될 수있는 몇 가지 추상 스텁을 생성하여이를 해결하려고 노력했다. 검토하고 문제가 계속

HTML

<div ng-repeat ="data_ in parentData track by $index"> 
    <ul> 
     <li ng-repeat="result in data_.data track by $index" ng-init="counter=increaseCounter();"> 
     <div ng-model="counter"></div> 
    </ul> 
</div> 

컨트롤러

// It simply store variable value in scope.counter 
$scope.counter = 0; 
$scope.increaseCounter = function() { 
    var cnt = $scope.counter++; 
    return cnt; 
}; 

//Another way is to call service while update variable vaule 
$scope.counter = 0; 
$scope.increaseCounter = function() { 
    var cnt = $scope.counter++; 
    AppService.updateValue(cnt); 
    return cnt; 
}; 

Answer 2

$scope.getMyprofile = function(IntrstdId){ 
    appServices.profile(IntrstdId, function(response){ 
     $scope.meDetails = response.data; 
    }) 
return $scope.meDetails; 

}

를 발생 있으면 알려 주시기 바랍니다

문제는이 기능이라고 생각합니다. appService.profile은 asyncronize 메소드이며 완료하기 전에 함수를 반환합니다. $scope.meDetails;

내 제안은 아래의 값을 하드 코어에 입력하고 결과를 확인하는 것입니다. 작동중인 경우 그에 따라 함수를 변경해야합니다.

$scope.meDetails ='some value'; 
return $scope.meDetails; 

Answer 3

비동기 문제와 함께 몇 가지 모범 사례 문제가 있습니다.

1. 요소를 재구성 할 때 함수를 다시 실행하려는 경우가 아니면 ng-init을 사용하지 마십시오 (예 : ng-if). 따라서 ng-repeat을 track by없이 사용하면 데이터 소스를 변경하면 자식의 ng-init이 모두 다시 트리거됩니다.

해결 방법 : 컨트롤러를 초기화 할 때 실행하거나 $scope.items이 채워지는 즉시 실행하십시오. 약속을 반환하는 함수를 ($http 인) 포장하는

angular.forEach($scope.items, function(item) { 
    appServices.profile(item).then(function(data){ 
    item.myPic = data; 
    }); 
}); 

<div class="" ng-repeat="item in items" > 
    <img src="{{item.myPic}}"> 
</div> 

2. 올바른 방법은 함수 자체를 반환하는 것입니다. 해결 된/거절 된 결과를 전달하는 방법에 대해 자세히 조사 할 수 있습니다.

// not needed anymore, just to showcase 
$scope.getMyprofile = function(IntrstdId){ 
    return appServices.profile(IntrstdId); 
} 

// same goes with the service function 
service.profile= function(userId) { 
    path = serviceUrl + '/profile/'+ userId; 
    return $http({ 
    method: 'GET', 
    url: path 
    }).then(function(response) { 
    return response.data; 
    }); 
}