나는 $에 http를 사용 아약스에 의해 객체의 배열을 얻을 기능이

Question

AngularJS와의 약속 배열에 항목을 추가이 코드

$scope.array = $scope.getArray('somepage'); 

실제로 작동하고 내가보기에 원하는 데이터가 있습니다.

그러나이 배열의 끝에 일부 데이터를 추가하고 싶습니다. 시도했습니다

$scope.addToArray = function(newItem) { 
    $scope.array.push(newItem); 
}; 

하지만 작동하지 않았습니다.

아이디어가 있습니까? 감사.

Answer 1

약속을 잘못하고있는 것처럼 보입니다.

getArray에서 반환 된 데이터를 피델 링 할 수있게하려면 범위 변수에 약속을 할당하면 안됩니다. 대신의 getArray 작동 방식 변경 : 당신이 배열을 얻을 호출 할 때 데이터 속성에 데이터 데이터를로드 지금

$scope.getArray = function(page) { 
    var propertyAccessor = $parse(page); 
    return $http.get(page).then(function(data) { 
     page.assign($scope, data.data); 
    }); 
}; 

을 당신이 그것을 수정할 수 있습니다 (이 처음 실행되면)

$scope.getArray('somepage'); 

$scope.addToArray = function(page, newItem) { 
    var propertyAccessor = $parse(page); 
    propertyAccessor($scope).push(newItem); 
} 

$scope.addToArray('somepage', 'someValue'); 

나는 그것을 ($의 Q를 사용하여 시뮬레이션) 원래 implemnenation 내 작업 예를 모두 가지고하는 demo of this together here을 넣어.

Answer 2

이 문제를 해결하기 위해 다른 방법을 선택했습니다. 더 나은지 확실하지 않지만 어쨌든 여기에 올려 놓을 것입니다. 내 배열에 물건을 추가하는 잠재적으로 관심 사람이 dataService을 주입 한 반면

(function(utility) { 
    angular.module('app'). 

    service('data',['$q', function($q) { 
     var deferred = $q.defer(); 
     var data = ['bla', 'bla']; 

     //some async $http stuff being done resulting in deferred.resolve(data) 

     utility.add = function(stuff) { 
     data.push(stuff); 
     }; 

     return deferred.promise; 
    }]). 

    service('dataService', [function() { 

     return { 
     add: function(data) { 
      utility.add(data); 
     }; 

    }]); 
}({})); 

기본적으로, 내 배열에만 관심이있는 모든 컨트롤러는 data 주입 것입니다. 그런 다음 add 함수를 포함하는 utility 객체 위에 클로저를 만들어 배열에 항목을 푸시합니다. 약속이 원본 배열에 대한 참조를 유지하므로 원본을 변경하면 해결 된 값이 실제로 업데이트되므로이 기능은 적어도 1.0.8 이상에서 작동합니다.

이렇게하면 내 controller은 $http에서 완전히 분리되며 서버에서 데이터를 가져 오는 방법에 대해 신경 쓸 필요가 없습니다. 의존성으로 선언하면 전달됩니다. 물건이 추가됩니다. 컨트롤러가없는 동안 서비스가 싱글 톤이기 때문에 내 데이터도 캐싱됩니다.