javascript - อัปเดต AngularJS scope จาก callback แบบอะซิงโครนัสของไลบรารีบุคคลที่สาม
สวัสดี ฉันกำลังพยายามใช้ import.io เพื่อเก็บคะแนนฟุตบอลบางส่วน ฉันสามารถทำให้ JS ของพวกเขาทำงานกับ API และส่งข้อมูลได้ ปัญหาคือมันต้องอยู่ในขอบเขตส่วนตัวภายในตัวควบคุมเนื่องจากฉันไม่สามารถใช้ ng-repeat กับมันได้
มีใครสามารถบอกฉันได้ไหมว่าทำไม และถ้ามีใครมีคู่มือที่ดีเกี่ยวกับ Scope ก็คงจะมีประโยชน์มากกว่า
latestScores.controller('ScoresController', function ($scope) {
$scope.pots = [];
var io2 = new importio("XXX", "XXXXXX[API KEY]XXXXXXXX", "import.io");
io2.connect(function (connected) {
if (!connected) {
console.error("Unable to connect");
return;
}
var data;
var callback = function (finished, message) {
if (message.type == "DISCONNECT") {
console.error("The query was cancelled as the client was disconnected");
}
if (message.type == "MESSAGE") {
if (message.data.hasOwnProperty("errorType")) {
console.error("Got an error!", message.data);
} else {
data = message.data.results;
}
}
if (finished) {
pots = data;
console.log(pots); /* This gives me an object */
}
}
io2.query({
"connectorGuids": [
"d5796d7e-186d-40a5-9603-95569ef6cbb9"],
}, callback);
});
console.log($scope.pots); /* This gives me nothing */
});
คำตอบ #1
การผูกข้อมูลของ AngularJS ไม่สามารถรู้ได้เมื่อคุณอัปเดต scope ของคุณใน callback จากไลบรารีของบุคคลที่สาม
ในการเรียกกลับของคุณ ให้ทำดังนี้:
$scope.pots = dataReceived
$scope.$apply();
หากคุณต้องการข้ามการเรียก $scope.apply() คุณจำเป็นต้องใช้โมดูลพรอมิสของ Angular เอง (เรียกว่า $q) และห่อการเรียก API ของคุณเข้าไปในบริการ
นอกจากนี้ หาก API ของคุณใช้ WebSocket คุณควรสมัครสมาชิกกับเหตุการณ์ $scope.on('$destroy') เพื่อยกเลิกการเชื่อมต่อจาก API ของคุณเมื่อคอนโทรลเลอร์ถูกลบไป
คำตอบ #2
ng-repeat มีขอบเขตของตัวเอง ในกรณีของคุณคุณกำลังกำหนดข้อมูลให้กับตัวแปรท้องถิ่นแทนที่จะกำหนดให้กับตัวแปรในขอบเขต
เปลี่ยนโค้ดชิ้นนี้
if (finished) {
pots = data;
console.log(pots); /* This gives me an object */
}
ถึง
if (finished) {
$scope.pots = data;
console.log($scope.pots); /* This gives me an object */
}
