성공 후 UI가 데이터로 업데이트되지 않습니다.

Question

Breeze를 처음 사용하고 배우기위한 샘플을 만들고 있습니다. 나는 문제에 직면하고있다. 나는 내가 콜백 onsuccess는에게 전달하고 getTodoLists 지금 아래

sample.factory('datacontext', ['breeze', 'Q', '$timeout', '$q', function (breeze, q, timeout, $q) { 
configureBreeze(); 
var manager = new breeze.EntityManager("/breeze/ProductsBreeze"); 
manager.enableSaveQueuing(true); 

var datacontext = { 
    metadataStore: manager.metadataStore, 
    getTodoLists: getTodoLists 
}; 
function getTodoLists(onsuccess) { 
    var query = breeze.EntityQuery.from("GetAllProducts"); 
    manager.executeQuery(query).then(onsuccess); 

}; 
return datacontext; 
//function getSucceeded(data) { 
// return data.results; 
//} 
function configureBreeze() { 
    breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true); 

    // configure to use camelCase 
    breeze.NamingConvention.camelCase.setAsDefault(); 
} 
}]); 

같은 서비스에서 데이터를 얻을 바람 코드를 추가하는 datacontext.js을 만들 수 있습니다. 여기에 지금 문제가 내가 사용하는 난 내 배열에 두 개의 레코드를 (콘솔에 표시)가 그 쇼 후 요청을 완료되었지만 UI가 업데이트되지되는 경우 내 컨트롤러

sample.controller('todoBreeze', ['datacontext', '$scope', '$log', function (datacontext, $scope, log) { 
$scope.heading = "Hello World"; 
$scope.Products = []; 
datacontext.getTodoLists(function (data) { 
    $scope.Products = data.results; 
    log.info($scope.Products); 

}); 
$scope.editProduct = function (pid, index) { 
}; 
$scope.deleteProduct = function (pid, index) { 

}; 
}]); 

입니다

<span>{{Products.length}}</span> 

하지만 요청이 완료된 후 $scope.$apply()으로 전화를하면 문제가 해결됩니다.

내 코드의 오류를 알려주십시오.

감사

아래

Answer 1

참조 UPDATE.

$ scope. $ apply() 함수는 코드를 "AngularJS world"에 다시 넣는 데 사용됩니다.

AngerJS 다이제스트주기 내에서 코드를 실행하는 데 필요한 써드 파티 라이브러리를 사용할 때 정확하게 사용해야합니다. 콜백이있는 AngularJS 서비스를 사용하는 경우에는 이미 백그라운드에서 $ apply()를 호출하고 코드를 다시 AngularJS 다이제스트주기에 넣습니다.

귀하의 경우 자신의 서비스를 만들고 컨트롤러에서 콜백을 전달하고 있습니다. 콜백이 호출되면 이미 AngularJS 다이제스트주기 밖에 있으므로 AngularJS는 범위가 변경되었음을 알 수 없습니다. $ apply 함수를 호출하면 코드가 다시 AngularJS 다이제스트주기로 설정되고 AngularJS는 범위가 변경된 것을 확인합니다. .

sample.factory('datacontext', ['breeze', 'Q', '$timeout', '$q', '$rootScope', function (breeze, q, timeout, $q, $scope) { 
configureBreeze(); 
var manager = new breeze.EntityManager("/breeze/ProductsBreeze"); 
manager.enableSaveQueuing(true); 

var datacontext = { 
    metadataStore: manager.metadataStore, 
    getTodoLists: getTodoLists 
}; 
function getTodoLists(onsuccess) { 
    var query = breeze.EntityQuery.from("GetAllProducts"); 
    manager.executeQuery(query).then($rootScope.$apply(onsuccess)); 
}; 
return datacontext; 

그런 식으로하면 : $ 범위에

더 자세한 안내 $이 적용 당신이 적용되는 $을 포함하려면이 같은 전화를하여 공장 코드를 변경할 수 있습니다, 그래서 http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

에서 찾을 수 있습니다 서비스를 사용하는 모든 컨트롤러에서 호출 할 필요가 없습니다.

UPDATE :.

나는 $ 범위에 관한 문장으로 잘못되었다 $ 적용(). 그래서 실제 예제를 제공하는 것이 낫습니다. 그래서 우리는이 예제를 가지고 놀 수 있습니다.

나는이 문제가 $ scope.Products 변수가 설정되어있는 참조를 변경하고 있다고 생각합니다. 당신이

$scope.Products = [] 

으로 초기화 할 때 배열 A를 생성하고 제품을 그 배열을 참조하십시오.당신이 당신의 콜백의 data.results의 배열을 통해 이동하고 제품 배열에 밀어하고 도움이되는지 볼 수

$scope.Products = data.results; 

시도를 할 때 다음 당신은 제품이 참조하는 배열을 변경합니다.